

nuxt3でtypes配下に型を定義しているのですが、pageたはcomponentsでimportをするとエラーになります。

  * page,componentsに直接型を書いた場合は読み込み成功
  * composables配下から同じ型を呼び出した時も読み込み成功

上記のことから設定周りが怪しいと思い調べたのですが、原因がわかりませんでした。

[![画像の説明をここに入力](https://i.stack.imgur.com/Z2teC.png)](https://i.stack.imgur.com/Z2teC.png)

hello.vue

[code]

    <template lang="pug">
    | {{message.text1}} {{message.text2}}
    </template>
    
    <script lang="ts" setup>
    import { Message } from '~/types/type1'
    
    const message: Message = {
      text1: 'おはよう',
      text2: 'こんにちわ',
    }
    </script>
    
[/code]

type1.ts

[code]

    export type Message = {
      text1: string
      text2: string
    }
    
[/code]

project

[code]

    project
    ├── .nuxt
          ├── app.config.mjs
          ├── components.d.ts
          ├── dev
          │   ├── index.mjs
          │   └── index.mjs.map
          ├── dist
          │   └── server
          │       ├── client.manifest.json
          │       ├── client.manifest.mjs
          │       └── server.mjs
          ├── imports.d.ts
          ├── nuxt.d.ts
          ├── nuxt.json
          ├── schema
          │   ├── nuxt.schema.d.ts
          │   └── nuxt.schema.json
          ├── tsconfig.json
          └── types
              ├── app.config.d.ts
              ├── imports.d.ts
              ├── layouts.d.ts
              ├── middleware.d.ts
              ├── nitro-config.d.ts
              ├── nitro-imports.d.ts
              ├── nitro-routes.d.ts
              ├── nitro.d.ts
              ├── plugins.d.ts
              ├── schema.d.ts
              └── vue-shim.d.ts
    ├── api
    ├── assets
    ├── components
      └── message.vue
    ├── composables
    ├── layouts
    ├── node_modules
    ├── nuxt.config.ts
    ├── package.json
    ├── pages
      └── hello.vue
    ├── plugins
    ├── public
    ├── stylelint.config.js
    ├── tsconfig.json
    ├── types
         └──  type1.ts
    └── yarn.lock
    
[/code]

nuxt.config.ts

[code]

    // https://nuxt.com/docs/api/configuration/nuxt-config
    import { defineNuxtConfig } from 'nuxt/config'
    import vuetify from 'vite-plugin-vuetify'
    
    export default defineNuxtConfig({
      app: {
        head: {
          title: 'ECHOES管理画面',
          htmlAttrs: {
            lang: 'ja',
          },
          meta: [
            { charset: 'utf-8' },
            {
              name: 'viewport',
              content: 'width=device-width, initial-scale=1',
            },
            { hid: 'description', name: 'description', content: '' },
            { name: 'format-detection', content: 'telephone=no' },
          ],
          link: [
            {
              rel: 'icon',
              type: 'image/x-icon',
              href: '/favicon.ico',
            },
          ],
        },
      },
      build: {
        transpile: ['vuetify', /typed-vuex/],
      },
      typescript: {
        tsConfig: {
          extends: '@tsconfig/strictest/tsconfig.json',
        },
        typeCheck: {
          eslint: {
            files: './**/*.{ts,vue}',
          },
        },
      },
      buildModules: ['@nuxt/typescript-build', 'nuxt-typed-vuex'],
      // .envの定義はここでしてしないと使用できない
      runtimeConfig: {
        public: {
          apiUrl: process.env.API_URL,
          baseUrl: process.env.BASE_URL,
          laravelWebUrl: process.env.LARAVEL_WEB_URL,
        },
      },
      hooks: {
        'vite:extendConfig': (config) => {
          config.plugins!.push(vuetify())
        },
      },
      vite: {
        ssr: {
          noExternal: ['vuetify'],
        },
        define: {
          'process.env.DEBUG': false,
        },
      },
      css: ['@/assets/sass/main.scss', '@mdi/font/css/materialdesignicons.css'],
    })
    
[/code]

tsconfig.json

[code]

    {
      "extends": "./.nuxt/tsconfig.json",
      "include": [
        "env.d.ts",
        ".nuxt/nuxt.d.ts",
        "**/*"
      ],
      "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": ".",
        "jsx": "preserve",
        "paths": {
          "~/*": [
            "./*"
          ],
          "@/*": [
            "./*"
          ]
        },
        "types": [
          "@nuxt/types",
          "@types/node",
          "@nuxt/typescript-build"
        ]
      },
      "exclude": [
        "node_modules",
        ".nuxt",
        "dist"
      ],
      "compilerOptions": {
        "types": [
          "@nuxt/types",
          {
            "lib": [
              "es6"
            ]
          }
        ]
      },
      "typeRoots": [
        "types",
        "node_modules/@types"
      ]
    }
    
[/code]


CC BY-SA 4.0
2023-04-17T03:01:00.430
94544
2023-04-17T03:08:24.067
2023-04-17T03:08:24.067
16768
16768
question
typescript nuxt.js
types配下の型定義がpage,componentsで呼び出せない