CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsvuetify.js
Pavel Tasits
Pavel Tasits

Reputation: 41

Vuetify default styles issue in Nuxt

my code is

<div class="cd-page__details-wrapper">
  <v-text-field
    label="Outlined"
    placeholder="Outlined"
    outlined
  ></v-text-field>
</div>

But I've got somthing horrible

printscreen of component

My nuxt.config.js

buildModules: [
  '@nuxtjs/dotenv',
  '@nuxtjs/vuetify',
],

Upvotes: 2

Views: 462

Answers (2)

Fabr&#237;cio Pinto
Fabr&#237;cio Pinto

Reputation: 429

For me, I was getting some missing CSS of my Vuetify components in the production build, the problem was with the nuxt-purgecss module, after removing it from the modules key in nuxt.config.ts and rebuilding again, it worked.

But now there is a problem with the unpurged CSS (as pointed out by kissu), so I opened a issue in the repo of the nuxt-purgecss module.

Issue: Vuetify 3 styles missing in production build

Upvotes: 0

kissu
kissu

Reputation: 46602

OP's issue was solved by adding v-app to the main div like that

<div class="v-app">
  <v-text-field
    label="Outlined"
    placeholder="Outlined"
    outlined
  ></v-text-field>
</div>

Upvotes: 1

Related Questions