search

invictus-codes / nuxt-vuetify

Add Vuetify 3 to your Nuxt application in seconds.
MIT License
71 stars 9 forks source link

[Bug]: Not compatible with Vuetify labs? / Can't import CSS? #12

Closed rudolfbyker closed 1 year ago

rudolfbyker commented 1 year ago

Contact Details

rudolfbyker@gmail.com

What happened?

Summary

When I try to import VSkeletonLoader in order to make it available as a component, like this …

import {VSkeletonLoader} from "vuetify/labs/VSkeletonLoader";

export default defineNuxtConfig({
  modules: [
    '@invictus.codes/nuxt-vuetify',
  ],
  vuetify: {
    vuetifyOptions: {
      components: {
        VSkeletonLoader,
      },
    },
  },
})

… I get an error like this during nuxt prepare:

Nuxi 3.5.0                                                                                                                                                                                                                    09:25:47

 ERROR  Unexpected token '.'                                                                                                                                                                                                  09:25:48

  .v-skeleton-loader {
  ^

This happens on the line where VSkeletonLoader tries to import CSS:

import "./VSkeletonLoader.css";

Steps to reproduce

npx nuxi@latest init repro
cd repro
yarn add --dev @invictus.codes/nuxt-vuetify
nano nuxt.config.ts  # Edit it to look like above
yarn  # Observe the error when it calls `nuxt prepare`

Version

1.0.2 (Default)

What browsers are you seeing the problem on?

No response

Relevant log output

$ yarn
yarn install v1.22.19
[1/4] Resolving packages...
success Already up-to-date.
$ nuxt prepare
Nuxi 3.5.0                                                                                                                                                                                                                    09:25:47

 ERROR  Unexpected token '.'                                                                                                                                                                                                  09:25:48

  .v-skeleton-loader {
  ^

  SyntaxError: Unexpected token '.'
  at internalCompileFunction (node:internal/vm:73:18)
  at wrapSafe (node:internal/modules/cjs/loader:1149:20)
  at Module._compile (node:internal/modules/cjs/loader:1190:27)
  at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
  at Module.load (node:internal/modules/cjs/loader:1089:32)
  at Module._load (node:internal/modules/cjs/loader:930:12)
  at Module.require (node:internal/modules/cjs/loader:1113:19)
  at require (node:internal/modules/cjs/helpers:103:18)
  at jiti (node_modules/jiti/dist/jiti.js:1:243592)
  at node_modules/vuetify/lib/labs/VSkeletonLoader/VSkeletonLoader.mjs:3:1
  at jiti (node_modules/jiti/dist/jiti.js:1:245784)
  at node_modules/vuetify/lib/labs/VSkeletonLoader/index.mjs:1:294
  at jiti (node_modules/jiti/dist/jiti.js:1:245784)
  at nuxt.config.ts:2:24
  at Object.jiti (node_modules/jiti/dist/jiti.js:1:245784)
  at resolveConfig (node_modules/c12/dist/index.mjs:279:24)
  at loadConfig (node_modules/c12/dist/index.mjs:116:40)
  at async loadNuxtConfig (node_modules/@nuxt/kit/dist/index.mjs:480:18)
  at async loadNuxt (node_modules/nuxt/dist/index.mjs:2920:19)
  at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:534:19)
  at async Object.invoke (node_modules/nuxi/dist/chunks/prepare.mjs:31:18)
  at async _main (node_modules/nuxi/dist/cli.mjs:48:20)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Additional context

I'm trying to migrate a working Vite+Vuetify3+Vue3 app to Nuxt3.

mohssineAboutaj commented 1 year ago

Until the owner updates this package, I suggest you use the traditional import method, in this example i'm also need to use v-data-table

  1. create a plugin/vuetify.js file: 
    
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import { VDataTable } from "vuetify/labs/VDataTable"
import * as directives from "vuetify/directives"

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

nuxtApp.vueApp.use(vuetify) })

2. update `nuxt.config.js`
```js
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    "vuetify/lib/styles/main.sass",
    "@mdi/font/css/materialdesignicons.min.css",
  ],
  build: {
    transpile: ["vuetify"],
  },
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },
})

more details see here

jvhellemondt commented 1 year ago

Included in latest version. Please reopen if you encounter any issues

gianluca1606 commented 1 year ago

i am still having some troubles with labs component.

How can i use them, i alredy have

useVuetifyLabs: true

I am using 0.3.0

vuetify: {
/* vuetify options */
vuetifyOptions: {
  blueprint: md3,
  components: {
    ...components,
    ...labsComponents,
  },

  // @TODO: list all vuetify options
},

moduleOptions: {
  /* nuxt-vuetify module options */
  treeshaking: true,
  useIconCDN: true,

  /* vite-plugin-vuetify options */
  styles: "sass",
  autoImport: true,
  useVuetifyLabs: true,
},

},

I get this errors:

Unexpected token '.' 12:51:37 PM

.v-application { ^

SyntaxError: Unexpected token '.'

buisine commented 1 year ago

same.

gianluca1606 commented 1 year ago

same.

so i found out what you need to change in order to be able to use Vuetify Labs Components.

In the Documentation i found that if useVuetifyLabs is set to true, treeshaking should be disabled otherwise it will not work.

You actually do not need to specify the components.. (i mean it does not work for me if i specify them).

buisine commented 1 year ago

Thank you, gave a try same pb :

[Vue warn]: Failed to resolve component: v-skeleton-loader                                    9:16:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

when trying like this :

import { VSkeletonLoader } from "vuetify/labs/VSkeletonLoader"; 
...
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi',
      },
      theme: {
        defaultTheme: 'light',
      },
      components: {
        VSkeletonLoader,
      },
    },

    moduleOptions: {
      treeshaking: false,
      useIconCDN: true,
      styles: 'sass',
      autoImport: true,
      useVuetifyLabs: true,
    }
  },

i get 

 ERROR  Cannot restart nuxt:  Unexpected token '.'                                            9:17:43 AM

  .v-skeleton-loader {
  ^

  SyntaxError: Unexpected token '.'

Maybe i will remove that plugin and go with regular vuetify installation..