[[📒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">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">GitHub - championswimmer/vuex-module-decorators: TypeScript/ES7 Decorators to create Vuex modules declaratively</p>
</div>
</div>
<img src="https://opengraph.githubassets.com/f1f99484c28e6b695bfc0f14b9cf22018100557753e7a78847f90f43a5800db6/championswimmer/vuex-module-decorators" class="link-card-image"/>
</div>
<a href="https://github.com/championswimmer/vuex-module-decorators"></a>
</div>