Search code examples
typescriptvuetify.jsvue-cli-3

Vue Cli 3 - Typescript - Vuetify styles not working with separate template file with @WithRender

My source code is as follows,

<script lang='ts'>
import { Vue, Component, Prop } from 'vue-property-decorator';
import WithRender from './ali-ums-progress.html';
import Constants from '../../constants';

@WithRender
@Component
export default class AliUMSProgress extends Vue {
}
</script>

<style lang='scss' scoped>
  @import './ali-ums-progress.scss';
</style>

HTML and scss files kept separate. Using @WithRender html contents are rendering but vuetify default styles not working.

Can anyone please help me here?

Solution

  • I found the solution for this...

    After installing vuetify with command 'vue add vuetify' creates file 'src/plugins/vuetify.ts'.

    In this file, replacing line import Vuetify from 'vuetify/lib' with import Vuetify from 'vuetify' resolved my issue.