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