Compatibility with Nuxt 3

[laurentfirdion]

The package seems not compatible with a Nuxt 3 project
It is working with the "dev" script but the build script fails wih the error [nuxt:composable-keys] Unexpected character '@' which refers to the use of @component (and I guess any use of a decorator).
The dev script works with warning regarding to the use of vite.config.js file (which is not supported by Nuxt but magically works in dev server mode).
I tried to put the vite.config.js recommended configuration in the nuxt.config.ts vite option but all attempts have failed.
If anyone has succeed to use this package with Nuxt3, I would be very interested by his input.

[fabiofcs]

Same for me.

To reproduce: https://github.com/fabiofcs/SandBoxErrorNuxtDecorator/tree/main

Environment:
Windows 10 PRO
Node: v18.16.0

Versions:
"nuxt": "^3.8.1",
"vue-facing-decorator": "^3.0.4"

The erro LOG:

 ERROR  Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
file: C:/Users/User/GitHubFette/SandBoxErrorNuxtDecorator/components/Test.vue?vue&type=script&lang.ts:4:0
2: import { Vue, Component } from "vue-facing-decorator";
3:
4: @Component
   ^
5: export default class Test extends Vue {
6:  helloWorld = "hello world";


 ERROR  Nuxt Build Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

  at error (/C:/Users/User/GitHubFette/SandBoxErrorNuxtDecorator/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
  at Module.error (/C:/Users/User/GitHubFette/SandBoxErrorNuxtDecorator/node_modules/rollup/dist/es/shared/node-entry.js:13745:16)
  at Module.tryParse (/C:/Users/User/GitHubFette/SandBoxErrorNuxtDecorator/node_modules/rollup/dist/es/shared/node-entry.js:14476:25)
  at Module.setSource (/C:/Users/User/GitHubFette/SandBoxErrorNuxtDecorator/node_modules/rollup/dist/es/shared/node-entry.js:14077:39)
  at ModuleLoader.addModuleSource (/C:/Users/User/GitHubFette/SandBoxErrorNuxtDecorator/node_modules/rollup/dist/es/shared/node-entry.js:24649:20)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

error Command failed with exit code 1.

[ruojianll]

Try this in tsconfig.json

{
    // https://nuxt.com/docs/guide/concepts/typescript
    "extends": "./.nuxt/tsconfig.json",
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

[laurentfirdion]

I already have this conf and it fails with it

[stembrino]

@ruojianll config was added to "sandbox code" but is getting the same error:
fabiofcs/SandBoxErrorNuxtDecorator@7a09bbc

[skht777]

I found solution for this.
install vue@3.3.9 directly in your project.
setup babel like below
https://facing-dev.github.io/vue-facing-decorator/#/en/quick-start/quick-start?id=in-javascript-projects

I replaced setting for nuxt.config.ts like this.

export default defineNuxtConfig({
  vite: {
    vue: {
      script: {
        babelParserPlugins: ['decorators'],
      }
    },
    plugins: [babelPlugin],
});

It works fine.

[stembrino]

plugins: [babelPlugin],

@skht777
The problem is persistent with Typescript installation that does not need anything with Vite using babelPlugin
vue-facing-decorator TS installation: https://facing-dev.github.io/vue-facing-decorator/#/en/quick-start/quick-start?id=in-typescript-projects.

The package in the sandbox was upgraded to the latest:

    "@nuxt/devtools": "latest",
    "nuxt": "^3.8.2",
    "vue": "^3.3.9",
    "vue-facing-decorator": "^3.0.4",
    "vue-router": "^4.2.5"

[skht777]

@stembrino
In my case, I need to use the babel plugin in my TS project as well.
This is the babelPlugin I have prepared.

import * as babel from '@babel/core'

export default {
  name: 'plugin-babel',
  transform: (src, id) => {
    if (
      id.includes('.vue') &&
      !id.includes('lang.css') &&
      !id.includes('lang.scss')
    ) {
      // the pattern of the file to handle
      return babel.transform(src, {
        filename: id,
        babelrc: true,
      })
    }
  },
}

[flosca]

I've managed to run nuxt build and/or nuxt generate in Nuxt3 project without any babel setting.

The setting you need to add to your nuxt.config.ts is the following:

 vite: {
    esbuild: {
      tsconfigRaw: {},
    },
  },

You can check it here by running nuxt build/nuxt generate
https://stackblitz.com/edit/nuxt-starter-jrx4hf?file=app.vue

[skht777]

I've managed to run nuxt build and/or nuxt generate in Nuxt3 project without any babel setting.

It is also worked fine in my project.

[laurentfirdion]

Thanks @flosca it fixes the build issue. However now the dev command doesn't work, the page is loading endlessly without displaying anything. The only difference in my config is that i'm trying to use Vuetify alongside
Here is my nuxt-config.ts file :

// https://nuxt.com/docs/api/configuration/nuxt-config
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    //...
  ],
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
    esbuild: {
      tsconfigRaw: {},
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_app.scss" as *;'
        }
      }
    },
  },
  app: {
    head: {
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
        { name: 'google', content: 'notranslate' },
      ],
      link: [
        // define font following https://medium.com/untitled-factory/changing-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap' },
      ],
    }
  },
  css: [
    './assets/scss_vue/_app.scss',
  ]
})

[flosca]

@laurentfirdion I've tuned Vuetify using this module: https://github.com/userquin/vuetify-nuxt-module/, it works easily with minimal description from their docs

[Groupguanfang]

I tried all night, if you want to use Decorator + tsx, in latest nuxt(v3.10.0), directly follow those steps:

Change your nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    vue: {
      script: {
        babelParserPlugins: ["decorators"],
      },
    },
    vueJsx: {
      babelPlugins: [["@babel/plugin-proposal-decorators", { version: "2023-05" }]],
    },
  },
});

Check your package.json's dependencies

"dependencies": {
    "nuxt": "^3.10.0",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5",
    "vue-facing-decorator": "^3.0.4",
    "@babel/core": "^7.23.9",
    "@babel/runtime": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/plugin-proposal-decorators": "^7.23.9",
    "@babel/plugin-transform-class-properties": "^7.23.3",
    "@babel/plugin-transform-runtime": "^7.23.9"
}

No need to write any Babel plugins, it done!

import { Component, Vue, toNative } from "vue-facing-decorator";

@Component({
    render(this: IndexView) {
        return <button>Hello world</button>;
    },
})
class IndexView extends Vue {}

export default toNative(IndexView);

[rdhelms]

@laurentfirdion Did these suggestions end up resolving the issue for you, or would you still say there are issues on the vue-facing-decorator side here that need to be addressed?

[stembrino]

@laurentfirdion Did these suggestions end up resolving the issue for you, or would you still say there are issues on the vue-facing-decorator side here that need to be addressed?

@rdhelms bumped the dependency of the Nuxt project and the dev mode is working without any additional configuration. However, it's not possible to generate the static files with yarn generate
Reproduced repo: https://github.com/stembrino/poc-sandbox-rrror-nuxt-decorator

    "@nuxt/devtools": "latest",
    "nuxt": "^3.10.2",
    "vue": "^3.4.19",
    "vue-facing-decorator": "^3.0.4",
    "vue-router": "^4.2.5"

As far as I searched, I didn't find anything in official docs to solve this problem.
In the end, the vue-facing-decorator does not have compatibility with the latest Nuxt version.

[stembrino]

@rdhelms if I downgrade the Nuxt to version 3.5.2, the yarn generate will work.

I don't know the exact Nuxt version that starts breaking the "generate" build with decorators

    "@nuxt/devtools": "latest",
    "nuxt": "3.5.2",
    "vue": "^3.4.19",
    "vue-facing-decorator": "^3.0.4",
    "vue-router": "^4.2.5"

Demo: https://github.com/stembrino/poc-sandbox-rrror-nuxt-decorator/blob/nuxt-3-5-2/package.json

[laurentfirdion]

@rdhelms I'm facing the same issue raised by @stembrino : the generate and build mode are broken with Nuxt version 3.10.X. I know it has worked with older versions of Nuxt but downgrading cannot be a long terme solution. I will say that this nice package is too fragile to be included in a production project. I will personally migrate to Nuxt3/Vue3 without the class component style. Thanks for the effort though

[stembrino]

@rdhelms I'm facing the same issue raised by @stembrino : the generate and build mode are broken with Nuxt version 3.10.X. I know it has worked with older versions of Nuxt but downgrading cannot be a long terme solution. I will say that this nice package is to fragile to be included in a production project. I will personally migrate to Nuxt3/Vue3 without the class component style. Thanks for the effort though

sorry @laurentfirdion I've mentioned the wrong name 😊. I totally agree with you.

[rdhelms]

@laurentfirdion @stembrino Here's a tiny Nuxt demo app using Nuxt 3.10.2 and vue-facing-decorator 3.0.4, which seems to be working as far as I can tell for both the dev and generate commands. I'm not as familiar with the wider Nuxt ecosystem, though, so could you take a look and maybe we can try to bridge the gap between this and the errors you guys are experiencing?
https://stackblitz.com/edit/nuxt-starter-j7sep4

Here it is on GitHub:
https://github.com/rdhelms/nuxt-vue-facing-decorator

[rdhelms]

[stembrino]

@rdhelms & @laurentfirdion
I had to add this Vite config to my nuxt.config.ts to make it work:

    vite: {
      esbuild: {
        tsconfigRaw: {},
      },
    },

Without it, it's not possible, @rdhelms I've tested this in your repo
https://stackblitz.com/edit/nuxt-starter-zpxscc?file=nuxt.config.ts

[stembrino]

@rdhelms is this could be considered a solution? I don't know, it seems a little confusing, it seems more like a "workaround".
What could be the "side effect" when setting this Vite config

Maybe this could be more consistent:

  vite: {
    esbuild: {
      tsconfigRaw: {compilerOptions: {experimentalDecorators: true}},
    },
  },

Also, in the previous version, it's not required to use this...

[rdhelms]

@stembrino My understanding is that the core issue here lies with esbuild's support for decorators (evanw/esbuild#104) which in turn impacts nuxt's support for decorators (nuxt/nuxt#14126). Until those are fully resolved, I believe we're left in the meantime (based on some of the comments in those issues) with needing to use workarounds like the one above.

In terms of "why" this workaround works, I think it's because we need to ensure that the experimentalDecorators: true option is truly being respected, and it seems like esbuild by default is not going to respect it unless the vite.esbuild.tsconfigRaw value exists in the nuxt config object.

I would agree that your last suggestion seems more clear than the empty object. Even though the empty object is technically enough to allow the tsconfig's experimentalDecorators value to be respected, it seems more intuitive to set the value in both places so that it's clear what the goal is.

I just double checked, and your suggestion does definitely also work, so I think that seems like the solution for now until the upstream projects finalize their decorator support. Would be interested to hear if others still have issues even with this config, though.
https://stackblitz.com/edit/nuxt-starter-ulf6q5?file=nuxt.config.ts

In nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: false },
  vite: {
    esbuild: {
      tsconfigRaw: {
        compilerOptions: {
          experimentalDecorators: true,
        },
      },
    },
  },
});

And in tsconfig.json

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

cc @laurentfirdion

[stembrino]

@rdhelms thanks for the support. It's clear and closed for me, at least at this moment.

[laurentfirdion]

@rdhelms thanks it solved all the issue. We can consider the issue closed at this point