🦸‍♂️

Nuxt-bridge+TypeScriptの環境構築

2021/10/20に公開約2,600字

Nuxt3を使おうとしたが、Nuxt3のStatic sitesは現在、整備中なのでNuxt2を入れてNuxt Bridgeでアップグレードした。

1. nodeバージョン確認

$ nodenv versions

2. nodeの推奨版(LTS)を入れる

現在のLTSは14.18.1

nodenvでのnodeバージョン管理方法

https://zenn.dev/shibu/articles/9fe7471f6a0ce1

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

vscodeの拡張機能で入れておくといいもの

参考

Volar

Discussion

ログインするとコメントできます