Module parse failed: Unexpected character '@'

I'm trying to migrate my Nuxt app to Typescript. Here is an example:

<!-- pages/index.vue -->
<template>
  <div>...</div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class Index extends Vue {}
</script>

I get the following error:

 ERROR  in ./pages/index.vue?vue&type=script&lang=ts&                                                                                        friendly-errors 14:20:39  

Module parse failed: Unexpected character '@' (176:0)                                                                                        friendly-errors 14:20:39  
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import { Component, Vue } from "nuxt-property-decorator";
|
> @Component
| export default class Index extends Vue {}
|
                                                                                                                                             friendly-errors 14:20:39  
 @ ./pages/index.vue?vue&type=script&lang=ts& 1:0-117 1:133-136 1:138-252 1:138-252
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Is it a configuration issue ?

// nuxt.config.ts
import { NuxtConfig } from "@nuxt/types";
import localesFetcher from "./lang/localesFetcher";

const config: NuxtConfig = async () => {
  const locales = await localesFetcher();
  return {
    head: {
      title: nuxt-app",
      htmlAttrs: {
        lang: "en",
        class: "custom-scrollbar",
      },
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "description", name: "description", content: "" },
      ],
      link: [{ rel: "icon", type: "image/png", href: "/icon.png" }],
    },
    plugins: [
      // https://github.com/Inndy/vue-clipboard2
      "~/plugins/vue-clipboard2.js",
      // https://github.com/P3trur0/vue-country-flag
      "~/plugins/vue-country-flag.js",
      // https://i18n.nuxtjs.org/callbacks/
      "~/plugins/i18n.js",
    ],
    components: true,
    loading: false,
    build: {
      // extractCSS: true,
      loaders: {
        limit: 0,
      },
    },
    buildModules: [
      // https://go.nuxtjs.dev/tailwindcss
      "@nuxtjs/tailwindcss",
      // https://google-analytics.nuxtjs.org/
      // "@nuxtjs/google-analytics",
      // https://github.com/teamnovu/nuxt-breaky
      "@teamnovu/nuxt-breaky",
    ],
    modules: [
      // https://i18n.nuxtjs.org/
      "nuxt-i18n",
      // https://github.com/nuxt-community/google-adsense-module
      // "@nuxtjs/google-adsense",
      // https://strapi.nuxtjs.org/
      "@nuxtjs/strapi",
      // https://github.com/nuxt-community/community-modules/tree/master/packages/toast
      "@nuxtjs/toast",
      // https://google-fonts.nuxtjs.org/
      "@nuxtjs/google-fonts",
    ],
    i18n: {
      baseUrl: process.env.BASE_URL || "http://localhost:3000",
      strategy: "prefix",
      locales,
      lazy: true,
      langDir: "lang/",
      defaultLocale: "en",
      vueI18n: {
        fallbackLocale: "en",
      },
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: "i18n_redirected",
        onlyOnRoot: true,
      },
    },
    strapi: {},
    toast: {
      position: "top-center",
      duration: 1000,
      theme: "tw",
    },
    tailwindcss: {
      jit: true,
      exposeConfig: true,
      viewer: false,
    },
    googleFonts: {
      families: {
        Poppins: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      },
    },
    // "google-adsense": {
    //   // id: "ca-pub-#########"
    // },
    // googleAnalytics: {
    //   dev: true,
    // },
  };
};

export default config;

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": [
      "@nuxt/types",
      "@types/node",
      "nuxt-i18n",
      "@nuxtjs/strapi",
      "@nuxtjs/toast"
    ]
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

// package.json
{
  "name": "nuxt-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build --modern",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "analyze": "yarn build -a",
    "vercel": "vercel dev"
  },
  "dependencies": {
    "@nuxtjs/strapi": "^0.3.1",
    "@nuxtjs/toast": "^3.3.1",
    "@nuxtjs/vercel-builder": "^0.21.2",
    "axios": "^0.21.1",
    "core-js": "^3.10.1",
    "nuxt": "^2.15.4",
    "nuxt-i18n": "^6.24.0",
    "nuxt-property-decorator": "^2.9.1",
    "vue-clipboard2": "^0.3.1",
    "vue-country-flag": "^2.0.4"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/google-fonts": "^1.2.0",
    "@nuxtjs/tailwindcss": "^4.0.3",
    "@teamnovu/nuxt-breaky": "^1.2.2",
    "postcss": "^8.2.10",
    "tailwind-stroke-color": "1.0.0",
    "tailwindcss": "^2.1.1",
    "tailwindcss-textshadow": "^2.1.3"
  }
}

nuxt-community / nuxt-property-decorator

Module parse failed: Unexpected character '@' #89