nuxt2.7 + vue2.6 を nuxt2.17 + vue2.7へ上げた件

nuxt2.7 + vue2.6 を nuxt2.17 + vue2.7へ上げた件

主な依存npm

• typescript
• nuxt-property-decorator
• vuex-class-component

composition api + script setupが得られた

script setupが使えるのはデカい。
たぶんtsxも使えるけど、Volarが強いのでhtmlで十分では。

webstormを使うとpugでも補完しまくりなので、webstorm + pugおすすめ。

本当はnuxt3まで上げたかった

nuxt3では class componentが無理っぽかった
vue-class-componentのvue3対応(ver8)はほぼ凍結されている。
かといって、composition-apiに書き換えるのも時間がかかりすぎるので断念。

移行手順

nuxtの新規プロジェクトを作成し、既存のソースをコピーする

yarn create nuxt-app <project-name>

yarn upgradeなどで行けるかなと思ったけど、nuxt configあたりも色々変わっているので、
新規に作り直してしまった方が安全。

vuex、useStoreが使えない

nuxt2.17だとvuex 3.6.2になるが、useStoreを持っていないっぽい。
class-componentから利用する分には問題ないが、
script setupすると、this.$storeも使えない。

pluginでstore情報をstatic変数へ保持、いつでも参照できるように対応した

plugins/store-accessor.ts

import { Plugin } from '@nuxt/types'
import { Store } from 'vuex'

let storeInstance: Store<any>

const accessor: Plugin = (context) => {
  storeInstance = context.store
}

export const getStore = () => storeInstance

export default accessor

nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/localstorage.js', ssr: false }
  ]
}

hoge.ts

import { getStore } from '~/plugins/store-accessor'

const store = getStore()

typescript

依存関係により4.2になる

その他

prettier 3.0.0を入れた（入った）ところ、Syntax関連のビルドエラーが発生した。
2.xで止めておくのが吉

Syntax Error: Unexpected token, expected "," (1:8)

> 1 | [object Promise]
    |         ^
  2 | export { render, staticRenderFns }
    at parser.next (<anonymous>)
    at normalizeFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)