[[create-nuxt-app]]を使って構築し、以下の要素を導入する。
| 項目 | 要素 | 状態 |
| ------------------- | -------------------------- | ---- |
| 言語 | [[TypeScript]] | 👌 |
| [[パッケージマネージャー]] | [[yarn]] | 👌 |
| フレームワーク | [[Nuxt2]] | 👌 |
| モジュール | [[axios]] | 🌀 |
| ユニットテスト | [[Jest]] | 🌀 |
| e2eテスト | [[Playwright]] | |
| [[リンター]] | [[ESLint]] | 👌 |
| [[フォーマッター]] | [[Prettier]] | 👌 |
| [[Vueの記法]] | [[Composition API]] | 👌 |
| [[UIフレームワーク]] | [[Vuetify]] | 👌 |
| Store | [[vuex-module-decorators]] | 👌 |
| 認証 | [[Amazon Cognito]] | |
これに **[[IE11]]で動作する** というチャレンジングな目標が加わる。ここでは[[IE11]]のみをサポートするが、他ブラウザへの拡張は恐らくできるはず。
## リポジトリ
[[vue2-typescript-vuetify-ie11-cms]]
## プロジェクトを作成する
```shell
$ npx create-nuxt-app vue2-typescript-vuetify-ie11-cms
...
create-nuxt-app v3.5.2
✨ Generating Nuxt.js project in vue2-typescript-vuetify-ie11-cms
? Project name: vue2-typescript-vuetify-ie11-cms
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
...
🎉 Successfully created project vue2-typescript-vuetify-ie11-cms
To get started:
cd vue2-typescript-vuetify-ie11-cms
yarn dev
To build & start for production:
cd vue2-typescript-vuetify-ie11-cms
yarn build
yarn start
To test:
cd vue2-typescript-vuetify-ie11-cms
yarn test
For TypeScript users.
See : https://typescript.nuxtjs.org/cookbook/components/
```
### 動作確認
まずはこの状態で動くかを確認。 **[[IE11]]以外で。**
```shell
cd vue2-typescript-vuetify-ie11-cms
yarn dev
```
## IE11対応
[[IE11]]で動作しないことを確認する。(動いてくれればいいのに😅)
```
SCRIPT5009: 'Symbol' は定義されていません。
vuetify.js (42000,1)
```
[[IE11で動くようにする#Nuxt jsの場合]]の設定を追加すればOK。
Hot Reloadがうまく動かない場合は[[IE11でNuxt2のHot Reloadが動かない]]も参考に。
## Composition API
[[composition-api plugin]]をインストールする。
```shell
$ yarn add @vue/composition-api
...
info All dependencies
└─ @vue/
[email protected]
...
```
[[Nuxt.jsでComposition APIを使用]]を参考に設定し、`default.vue`の`<script>`を変更して動作確認する。
```ts
import {
computed,
defineComponent,
reactive,
toRefs,
} from '@vue/composition-api'
export default defineComponent({
setup() {
const state = reactive({
clipped: false,
drawer: false,
fixed: false,
items: [
{
icon: 'mdi-apps',
title: 'Welcome',
to: '/',
},
{
icon: 'mdi-chart-bubble',
title: 'Inspire',
to: '/inspire',
},
],
miniVariant: false,
right: true,
rightDrawer: false,
title: 'Vuetify.js',
})
const wordCount = computed(() => state.title.length)
return {
// toRefsはstateを分割代入しても参照(監視)が切れないようにしている
// stateをreturnすれば不要。その場合はtemplateの各箇所に`state.`をつけること
...toRefs(state),
wordCount,
}
}
})
```
動いたので使えそう😊
## vuex-module-decorators
[[vuex-module-decorators]]をインストールする。
```shell
$ yarn add --dev vuex-module-decorators
...
info All dependencies
└─
[email protected]
...
```
あとは[[Nuxt2でvuex-module-decoratorsを使う]]を参照。
[[Nuxt2]]のテンプレートで[[experimentalDecorators]]は`true`になっているため[[TypeScriptでvuex-module-decoratorsを使う]]は必須ではない。
## 対応ブラウザ設定
[[Browserslist]]に従って`.browserslistrc`を作成する。
```shell
# IE11だけに対応するためdefaultは除外
IE 11
last 2 versions
not dead
```