[[📒Articles]] > [[📒2021 Articles]]
![[2021-06-27.jpg|cover-picture]]
## はじめに
この記事は執筆時点で以下の技術を利用したプロジェクトを[[create-nuxt-app]]で作った記録です。
- [[Nuxt2]]
- [[TypeScript]]
- [[Composition API]]
- [[Vuetify]]
内容は時間と共に風化します。信じるべきは公式ドキュメントであり、基本的にこの記事を今後更新していくつもりはありません。本記事の内容を正とするのではなく、あくまで**ある時点での記録**として参考にしてください。
## 環境
- [[Windows 10]]
- [[Node.js]] v14.16.1
- [[npm]] v6.14.12
## プロジェクト作成
[[create-nuxt-app]]を実行します。
```console
$ npx create-nuxt-app nuxt-typescript-vuetify-sample
create-nuxt-app v3.6.0
✨ Generating Nuxt.js project in nuxt-typescript-vuetify-sample
? Project name: nuxt-typescript-vuetify-sample
? Programming language: TypeScript
? Package manager: Npm
? 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
```
[[#はじめに]]で紹介した技術以外もいくつか選択しました。
| package | 必要性 | 備考 |
| ------------ | -------- | ------------------------------- |
| [[Prettier]] | ==必須== | フォーマッターは絶対必要 |
| [[Jest]] | **高い** | [[ユニットテスト]]は書きますよね.. |
| [[axios]] | **高い** | APIクライアントは大抵必要になる |
| [[ESLint]] | 低い | 一旦入れて邪魔なら消す |
作成成功すると以下のようなメッセージが出ます。
```console
🎉 Successfully created project nuxt-typescript-vuetify-sample
To get started:
cd nuxt-typescript-vuetify-sample
npm run dev
To build & start for production:
cd nuxt-typescript-vuetify-sample
npm run build
npm run start
To test:
cd nuxt-typescript-vuetify-sample
npm run test
For TypeScript users.
See : https://typescript.nuxtjs.org/cookbook/components/
```
### 動作確認
先ほどのメッセージに従います。
```console
cd nuxt-typescript-vuetify-sample
npm run dev
```
`http://localhost:3000/`にアクセスすると画面が出ます。この時点で[[Composition API]]以外はすべて揃っています。
- [x] [[Nuxt2]]
- [x] [[TypeScript]]
- [ ] [[Composition API]]
- [x] [[Vuetify]]
## [[Composition API]]の導入
### [[Nuxt Composition API]]のインストール
執筆時点で[[Nuxt2]]は[[Vue3]]に対応していないため、[[Nuxt Composition API]][^1]を使う必要があります。[Quick start]を参考にインストールします。
[Quick start]: https://composition-api.nuxtjs.org/getting-started/setup/
```console
$ npm install @nuxtjs/composition-api
+ @nuxtjs/
[email protected]
```
`nuxt.config.js`の`buildModules`に追加します。
```diff:nuxt.config.js
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
+ '@nuxtjs/composition-api/module',
],
```
[^1]: 内部で[[composition-api plugin]]をインストールしており、それらのメソッドやhooksを使うことができます
### ソースコードの書き換え
`default.vue`を[[Composition API]]の実装に書き換えてみます。以下は変更前のコードです。
```html:default.vue
<script>
export default {
data() {
return {
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',
}
},
}
</script>
```
[[Nuxt Composition API]]を使うと以下のようになります。
```html:default.vue
<script lang="ts">
import {defineComponent, reactive, toRefs} from "@nuxtjs/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',
})
return {
...toRefs(state),
}
}
})
</script>
```
## まとめ
[[create-nuxt-app]]を使って以下4技術をベースにしたプロジェクトを作成してみました。
- [[Nuxt2]]
- [[TypeScript]]
- [[Composition API]]
- [[Vuetify]]
[[Composition API]]の詳しい使い方は本記事では説明しませんでしたが、気になる方は[[Composition API#MOC]]などを参考にしてください。
余談ですが、[[Nuxt2]]でプロダクトを開発するなら[[vuex-module-decorators]]も是非取り入れたいところです。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - championswimmer/vuex-module-decorators: TypeScript/ES7 Decorators to create Vuex modules declaratively
</div>
<div class="link-card-v2-content">
TypeScript/ES7 Decorators to create Vuex modules declaratively - championswimmer/vuex-module-decorators
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/632cc58fa6e35596d993a2bfaf3fe92467a57a93c45f2b0afa8ac7b32ad1ead2/championswimmer/vuex-module-decorators" />
<a href="https://github.com/championswimmer/vuex-module-decorators"></a>
</div>