🦸♂️
Nuxt-bridge＋TypeScriptの環境構築
Nuxt3を使おうとしたが、Nuxt3のStatic sitesは現在、整備中なのでNuxt2を入れてNuxt Bridgeでアップグレードした。
1. nodeバージョン確認
$ nodenv versions
2. nodeの推奨版(LTS)を入れる
現在のLTSは14.18.1
nodenvでのnodeバージョン管理方法
3. nuxt2を入れる
$ npm init nuxt-app <project-name>
? Programming language
> TypeScript
? Package manager(→どっちでも)
> Npm
? UI framework
> None
? Nuxt.js modules
何もいらない
? Listing tools
> ESLint
> Prettier
> StyleLint
? Testing framework
> None
? Rendering mode
> Universal (SSR / SSG)
? Deployment target
> Static(Statc/Jamstack hosting)
? Development tools
> jsconfig.json
? Continuous integration
> None
? Version control system
> Git
4.package.jsonを書き換え
・dependencies内の"nuxt": "^2.15.0"を削除し、"nuxt-edge": "latest"を追加
・@nuxt/typescript-buildを削除
・package-lick.jsonを削除
・コンソルでnpm i
5. Nuxt Brodgeをインストール
$ npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge
6. スクリプトの書き換え
nuxt.config.jsでtarget: 'static'に設定している場合は
package.jsonのscriptの中の"build": "nuxt build"を"build": "nuxt generate"に書き換える
{
"scripts": {
"build": "nuxt generate"
}
}
コンソルでnpm i
7. nuxt.config.jsを書き換え
・ 先頭にimport { defineNuxtConfig } from '@nuxt/bridge'を追記
・export default{,,,}の部分をexport default defineNuxtConfig({,,,}) に書き換える
・'@nuxt/typescript-build',を削除
8. tsconfig.jsonを書き換え
上の方にある"compilerOptions": {の前に
"extends": "./.nuxt/tsconfig.json",を追加
9. .gitignoreに追記
gitignoreファイルに.outputを追記
10. nuxt/bridgeをインストール
npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge
package.jsonのdevDependencie以下に"@nuxt/bridge"が追加される
11. nuxt.d.tsを作成
参考
以下を追加
// This file is auto generated by `nuxt prepare`
// Please do not manually modify this file.
/// <reference types="@nuxt/bridge" />
/// <reference types="@nuxt/components" />
/// <reference types="@nuxt/telemetry" />
/// <reference path=".nuxt/nitro.d.ts" />
/// <reference types="unplugin-vue2-script-setup/types" />
/// <reference path=".nuxt/auto-imports.d.ts" />
export {}
eslintの設定
参考
・モジュールのインストール
$ npm install -D eslint-plugin-vue@latest
・.eslintrc.jsのextends以下に以下を追記
'plugin:vue/vue3-recommended',
立ち上げ, generate
$npm run dev
$npm run generate
Discussion