@Prop not working

[wanasuire]

Hello,

I’ve tried a fresh install of vue3 with vue-facing-decorator, but it does not work out of the box. The documentation is lacking informations about how to use babel (so I’m not sure about what I did) ; and the @Prop decorator does not work…

My fresh install has been made using npm create vite@latest and create-vue.

Here’s what’s in my package.json :

{
    "name": "vue3-base-install",
    "version": "0.0.0",
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "run-p type-check \"build-only {@}\" --",
        "preview": "vite preview",
        "build-only": "vite build",
        "type-check": "vue-tsc --build --force",
        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
        "format": "prettier --write src/"
    },
    "dependencies": {
        "vue": "^3.4.29",
        "vue-facing-decorator": "^3.0.4",
        "vue-router": "^4.3.3"
    },
    "devDependencies": {
        "@babel/core": "^7.25.2",
        "@babel/plugin-proposal-decorators": "^7.24.7",
        "@rushstack/eslint-patch": "^1.8.0",
        "@tsconfig/node20": "^20.1.4",
        "@types/babel__core": "^7.20.5",
        "@types/node": "^20.14.5",
        "@vitejs/plugin-vue": "^5.0.5",
        "@vue/eslint-config-prettier": "^9.0.0",
        "@vue/eslint-config-typescript": "^13.0.0",
        "@vue/tsconfig": "^0.5.1",
        "eslint": "^8.57.0",
        "eslint-plugin-vue": "^9.23.0",
        "npm-run-all2": "^6.2.0",
        "prettier": "^3.2.5",
        "typescript": "~5.4.0",
        "vite": "^5.3.1",
        "vite-plugin-vue-devtools": "^7.3.1",
        "vue-tsc": "^2.0.21"
    }
}

My vite.config.js :

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import babel from '@babel/core'

const babelPlugin = {
    name: 'plugin-babel',
    transform: (src, id) => {
        if (/\.(jsx?|vue)$/.test(id)) {
            // the pattern of the file to handle
            return babel.transform(src, {
                filename: id,
                babelrc: true
            })
        }
    }
} as PluginOption

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue({
            script: {
                babelParserPlugins: ['decorators'] // must enable decorators support
            }
        }),
        vueDevTools(),
        babelPlugin
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

The tsconfig.app.json, in which I’ve only added the experimentalDecorator option:

{
    "extends": "@vue/tsconfig/tsconfig.dom.json",
    "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
    "exclude": ["src/**/__tests__/*"],
    "compilerOptions": {
        "composite": true,
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"]
        },
        "experimentalDecorators": true
    }
}

The babel.config.json:

{
    "plugins": [["@babel/plugin-proposal-decorators", { "version": "2023-11" }]]
}

The App.vue :

<script setup lang="ts">
import MyComponent from './MyComponent.vue'
</script>

<template>
    <MyComponent :decorated-prop="'given prop content'" />
</template>

<style></style>

and the MyComponent.vue:

<script lang="ts">
import { Component, Prop, Vue, toNative } from 'vue-facing-decorator'

@Component
class MyComponent extends Vue {
    @Prop({ default: 'prop default value' }) decoratedProp?: string

    vueData = 'some data'
}

export default toNative(MyComponent)
</script>

<template>
    I am MyComponent<br />
    data: {{ vueData }}<br />
    prop: {{ decoratedProp }}<br />
</template>

Finally, here’s a screenshot of what I get in the browser : As you can see, my prop is considered as an attribute, not as a Vue prop… What am I missing ?

Thank you for your help