Can i use vuetify3 in nuxt3 with pinia?

[ghost]

I installed the pinia and vuetify3 and i got the message like that..

'''
[vite dev] Error loading external "fs".
at file:///C:/Users/ipactory_pc_006/Desktop/projects/test3/.nuxt/dist/server/server.mjs:3021:264
at async instantiateModule (file:///C:/Users/ipactory_pc_006/Desktop/projects/test3/.nuxt/dist/server/server.mjs:22994:3)
'''

i installed vuetify3 in this way,

https://github.com/nuxt/framework/discussions/1183

wobsoriano's comment

Import components
'''
// plugins/vuetify.ts
import { defineNuxtPlugin } from '#app'
import { createVuetify } from 'vuetify'
import {
VApp,
VAppBar,
VBtn
} from 'vuetify/components'

// Import everything
// import * as components from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components: {
VApp,
VAppBar,
VBtn
}
})
nuxtApp.vueApp.use(vuetify)
})
'''
Transpile and add styles to nuxt.config.ts
'''
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass'],
build: {
transpile: ['vuetify']
}
})
'''

and i installed pinia in this way,

'''
yarn add pinia
'''

make directory "plugins" and make typescript file "pinia.ts" and

'''
import { createPinia } from "pinia";
import { defineNuxtPlugin } from "nuxt3";

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(createPinia());
});
'''

and error...

Please help me

[angelhdzmultimedia]

You need to install @pinia/nuxt and then in nuxt config:

export default defineNuxtConfig({
  srcDir: './src',
  modules: ['@pinia/nuxt'],
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
})

And for vuetify, create a plugins folder, with a vuetify.ts file and inside:

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

But I'm having issues to render Vuetify's styles correctly so that's why I'm here in the discusion to find a solution :P...
My 's color primary is purple instead of blue... and the <v-app> and <v-bar> are not stretching to full window width...

Edit

Fixed the issue of the <v-app> not stretching to full width. It was a webloader font plugin that some Vuetify script I ran created. I checked the console on the browser and noticed the error, so I deleted that plugin and the error went away and now the app is rendering fully. The only issue remaining is the VBtn's primary color being purple instead of blue...