2019年8月20日にNuxt.jsのバージョンが2.8.1から2.9へがリリースされました。2019年9月19日時点ではバージョン2.9.2まであがっています。本投稿ではリリース内容と変更点が見れるように2.8.1から2.9.1のソースのDiffと変更されたファイル一覧を載せておきます。変更ファイル数は、examples
やtest
を除くと約142ファイルでした。またバージョンが上がっただけ、関数にスペースが追加されただけのファイルも多く、それを除くともっと少なくなります。
本リリースでの大きな変更はImportant Notes
の中でもTypescript
関連の変更が個人的には大きいと思います。Nuxt Typescript
の導入やMigration
はリリースノートにあるページの Setup、Migration from Nuxt 2.8 を見れば簡単に行えます。(本記事の一番下でも試しにやってみました。)
リリースノート
nuxtjs.org
Due to a known problem (webpack/webpack#8656, #4869, #4839) users of npm should either remove package-lock.json and reinstall before upgrade or use npm update acorn --depth 20 && npm dedupe after upgrading to 2.4.0. users should have no problems but removing yarn.lock still recommended before the upgrade process.
Diff
v2.8.1からv2.9.2のDiffをつくってみました。
v2.9.2 diff by taisa831 · Pull Request #1 · taisa831/nuxt.js
Types of changes Bug fix (a non-breaking change which fixes an issue) New feature (a non-breaking change which adds functionality) Breaking change (fix or feature that would cause existing functionality to change) Description Checklist: My change requires a change to the documentation. I have updated the documentation accordingly.
変更ファイル
nuxt.js v2.8.1 -> v2.9.2
examples examples,examples/async-component-injection/pages/_slug.vue examples,examples/async-data/pages/posts/_id.vue examples,examples/async-data/pages/posts/index.vue ...
examples
とtest
を除いた変更ファイル一覧
- .circleci/config.yml
- .eslintignore
- .eslintrc.js
- README.md
- babel.config.js
- distributions/nuxt-start/package.js
- distributions/nuxt-start/package.json
- distributions/nuxt-ts/README.md
- distributions/nuxt-ts/bin/nuxt-ts.js
- distributions/nuxt-ts/package.js
- distributions/nuxt-ts/package.json
- distributions/nuxt/README.md
- distributions/nuxt/package.js
- distributions/nuxt/package.json
- jest.config.js
- lerna.json
- package.json
- packages/babel-preset-app/README.md
- packages/babel-preset-app/package.json
- packages/babel-preset-app/src/index.js
- packages/babel-preset-app/src/polyfills-plugin.js
- packages/builder/package.json
- packages/builder/src/builder.js
- packages/builder/src/context/build.js
- packages/builder/src/context/template.js
- packages/builder/src/ignore.js
- packages/cli/package.json
- packages/cli/src/command.js
- packages/cli/src/commands/build.js
- packages/cli/src/commands/dev.js
- packages/cli/src/commands/generate.js
- packages/cli/src/commands/help.js
- packages/cli/src/commands/index.js
- packages/cli/src/commands/start.js
- packages/cli/src/imports.js
- packages/cli/src/index.js
- packages/cli/src/list.js
- packages/cli/src/options/common.js
- packages/cli/src/options/index.js
- packages/cli/src/options/server.js
- packages/cli/src/run.js
- packages/cli/src/setup.js
- packages/cli/src/utils/banner.js
- packages/cli/src/utils/config.js
- packages/cli/src/utils/formatting.js
- packages/cli/src/utils/index.js
- packages/cli/src/utils/memory.js
- packages/cli/src/utils/typescript.js
- packages/config/index.d.ts
- packages/config/package.json
- packages/config/src/config/_app.js
- packages/config/src/config/_common.js
- packages/config/src/config/build.js
- packages/config/src/config/index.js
- packages/config/src/options.js
- packages/config/types/build.d.ts
- packages/config/types/env.d.ts
- packages/config/types/fetch.d.ts
- packages/config/types/generate.d.ts
- packages/config/types/globals.d.ts
- packages/config/types/head.d.ts
- packages/config/types/hooks.d.ts
- packages/config/types/index.d.ts
- packages/config/types/loading.d.ts
- packages/config/types/module.d.ts
- packages/config/types/plugin.d.ts
- packages/config/types/render.d.ts
- packages/config/types/router.d.ts
- packages/config/types/server-middleware.d.ts
- packages/config/types/server.d.ts
- packages/config/types/vue-configuration.d.ts
- packages/config/types/watchers.d.ts
- packages/core/package.json
- packages/core/src/hookable.js
- packages/core/src/module.js
- packages/core/src/nuxt.js
- packages/core/src/resolver.js
- packages/generator/package.json
- packages/generator/src/generator.js
- packages/server/package.json
- packages/server/src/context.js
- packages/server/src/jsdom.js
- packages/server/src/listener.js
- packages/server/src/middleware/error.js
- packages/server/src/middleware/nuxt.js
- packages/server/src/middleware/timing.js
- packages/server/src/server.js
- packages/typescript/package.js
- packages/typescript/package.json
- packages/typescript/src/index.js
- packages/utils/package.json
- packages/utils/src/cjs.js
- packages/utils/src/context.js
- packages/utils/src/lang.js
- packages/utils/src/locking.js
- packages/utils/src/modern.js
- packages/utils/src/resolve.js
- packages/utils/src/route.js
- packages/utils/src/serialize.js
- packages/utils/src/task.js
- packages/utils/src/timer.js
- packages/vue-app/index.d.ts
- packages/vue-app/package.json
- packages/vue-app/src/index.js
- packages/vue-app/template/App.js
- packages/vue-app/template/client.js
- packages/vue-app/template/components/no-ssr.js
- packages/vue-app/template/components/nuxt-build-indicator.vue
- packages/vue-app/template/components/nuxt-child.js
- packages/vue-app/template/index.js
- packages/vue-app/template/router.js
- packages/vue-app/template/router.scrollBehavior.js
- packages/vue-app/template/utils.js
- packages/vue-app/types/index.d.ts
- packages/vue-app/types/process.d.ts
- packages/vue-app/types/vue.d.ts
- packages/server/src/middleware/nuxt.js
- packages/server/src/middleware/timing.js
- packages/server/src/server.js
- packages/typescript/package.js
- packages/typescript/package.json
- packages/typescript/src/index.js
- packages/utils/package.json
- packages/utils/src/cjs.js
- packages/utils/src/context.js
- packages/utils/src/lang.js
- packages/utils/src/locking.js
- packages/utils/src/modern.js
- packages/utils/src/resolve.js
- packages/utils/src/route.js
- packages/utils/src/serialize.js
- packages/utils/src/task.js
- packages/utils/src/timer.js
- packages/vue-app/index.d.ts
- packages/vue-app/package.json
- packages/vue-app/src/index.js
- packages/vue-app/template/App.js
- packages/vue-app/template/client.js
- packages/vue-app/template/components/no-ssr.js
- packages/vue-app/template/components/nuxt-build-indicator.vue
- packages/vue-app/template/components/nuxt-child.js
- packages/vue-app/template/index.js
- packages/vue-app/template/router.js
- packages/vue-app/template/router.scrollBehavior.js
- packages/vue-app/template/utils.js
- packages/vue-app/types/index.d.ts
- packages/vue-app/types/process.d.ts
- packages/vue-app/types/vue.d.ts
- packages/vue-renderer/package.json
- packages/vue-renderer/src/renderer.js
- packages/vue-renderer/src/renderers/base.js
- packages/vue-renderer/src/renderers/modern.js
- packages/vue-renderer/src/renderers/spa.js
- packages/vue-renderer/src/renderers/ssr.js
- packages/webpack/package.json
- packages/webpack/src/builder.js
- packages/webpack/src/config/base.js
- packages/webpack/src/config/client.js
- packages/webpack/src/config/modern.js
- packages/webpack/src/config/server.js
- packages/webpack/src/plugins/vue/client.js
- packages/webpack/src/plugins/vue/cors.js
- packages/webpack/src/plugins/vue/modern.js
- packages/webpack/src/plugins/vue/server.js
- packages/webpack/src/plugins/warning-ignore.js
- packages/webpack/src/utils/perf-loader.js
- packages/webpack/src/utils/postcss.js
- packages/webpack/src/utils/style-loader.js
- renovate.json
- scripts/changelog.js
- scripts/dev.js
- scripts/link.js
- scripts/package.js
- scripts/rollup.config.js
Nuxt Typescriptプロジェクトを新規作成する
npx create-nuxt-app
でNuxt
プロジェクトを新規作成する
※ この時点ではTypescript
のソースがある場合は起動できませんがなにもしなければ起動します。
npx create-nuxt-app cd
分離されて新しくなったnuxt/typescript-build
をインストールする
yarn add --dev @nuxt/typescript-build # OR npm install --save-dev @nuxt/typescript-build
nuxt.config.js
のbuildModules
に@nuxt/typescript-build
を追記する
// nuxt.config.js buildModules: ['@nuxt/typescript-build']
tsconfig.json
を新規作成する
// tsconfig.json { "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "lib": [ "esnext", "esnext.asynciterable", "dom" ], "esModuleInterop": true, "allowJs": true, "sourceMap": true, "strict": true, "noEmit": true, "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./*" ] }, "types": [ "@types/node", "@nuxt/types" ] }, "exclude": [ "node_modules" ] }
このまま起動すると以下のように怒られる場合があるのでtsconfig.json
のcompilerOptions
に"experimentalDecorators"
を追記する
ERROR in /Users/tt-dev/src/taisa831/nuxt-typescript/components/TodoList.vue(47,22): nuxt:typescript 11:06:14 47:22 Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
// tsconfig.json "compilerOptions": { "experimentalDecorators": true }
起動するとTypescript
のコードが入っていても問題なく表示されます🎉
npm run dev
※ 既存プロジェクトからのMigration
方法は以下です。
https://typescript.nuxtjs.org/migration.html
参考
https://typescript.nuxtjs.org/guide/setup.html#configuration