Vuestic with Nuxt 3

[wobsoriano]

You can use Vuestic with Nuxt 3 already:

First, create a file in your plugins folder:

// plugins/vuestic.ts
import { VuesticPlugin } from 'vuestic-ui'
  
// Add tree-shaking here if you want

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VuesticPlugin)
})

Then in your nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    css: ['vuestic-ui/dist/vuestic-ui.css'],
    meta: {
        link: [
            { src: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap', rel: 'stylesheet' },
            { src: 'https://fonts.googleapis.com/icon?family=Material+Icons', rel: 'stylesheet' },
        ]
    },
    build: {
        transpile: ["tslib", "@popperjs"],
    },
})

[havormark]

tried it but didn't work

[wobsoriano]

Link for a simple repro please

[havormark]

I'm not working from a repo. I made a fresh install of nuxt 3 and follow your setup. I only used a button component in app.vue and when I started the dev server it gave an error. You can try it on a fresh nuxt 3 and see.

[wobsoriano]

Nuxt updated app to vueApp. Try to update

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VuesticPlugin) // previously nuxtApp.app.use
})

[wobsoriano]

also have to transpile some deps, will check again

[delete-rain]

look this https://github.com/asvae/nuxt3-vuestic-ui

import { createVuestic } from 'vuestic-ui'
import 'vuestic-ui/css'

export default defineNuxtPlugin(nuxtApp => {
  const vuestic = createVuestic()
  nuxtApp.vueApp.use(vuestic)
})

[m0ksem]

You should use @vuestic/nuxt module instead.

https://vuestic.dev/en/getting-started/nuxt