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

Question

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?

score 0 · Answer 1 · edited Jul 19 '20 at 14:30

0

The Vuetify plugin file must contain a style import like the following (documentation):

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css' <------ here
Vue.use(Vuetify);

export default new Vuetify({
});

It worked for me.

edited Jul 19 '20 at 14:30

guychouk

671
1
8
28

answered Jul 19 '20 at 13:12

we_are_unlimited

31
1
5

Great succinct answer, just be sure to add the documentation link to it as well. You should have mentioned the [Webpack install](https://vuetifyjs.com/en/getting-started/quick-start/#webpack-install) section of Vuetify's docs as well. – guychouk Jul 19 '20 at 14:29

score -1 · Accepted Answer · answered Jan 18 '19 at 06:35

-1

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.

answered Jan 18 '19 at 06:35

Mangesh Daundkar

1,026
1
15
20

`"export 'default' (imported as 'Vuetify') was not found in 'vuetify'` ? – Liu Ameng Oct 08 '19 at 02:39

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

2 Answers2