0

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

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

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

画像の説明をここに入力

hello.vue

<template lang="pug">
| {{message.text1}} {{message.text2}}
</template>

<script lang="ts" setup>
import { Message } from '~/types/type1'

const message: Message = {
  text1: 'おはよう',
  text2: 'こんにちわ',
}
</script>

type1.ts

export type Message = {
  text1: string
  text2: string
}

project

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

nuxt.config.ts

// 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'],
})

tsconfig.json

{
  "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"
  ]
}

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。