以前に「Next.js」+「TypeScript」でWebアプリの環境構築をしましたが、今回は「Nuxt.js」+「TypeScript」となります。
「Nuxt.js」は「Vue.js」を使用して開発するフレームワークとなります。
また「Nuxt.js」は、バージョン3から大きく変更されており、今回は「Nuxt3」でのやり方となります。
ちなみに2023年4月1日現在では「create-nuxt-app」でプロジェクトを用意した場合は、バージョン2がインストールされているようです。
環境
- npm 9.6.3
- yarn 1.22.17
- nuxt 3.3.2
「Nuxt.js」プロジェクトの作成
以下のコマンドで「Nuxt.js」のプロジェクトを作成します。
$ npx nuxi init {プロジェクト名}「nuxt.js」のバージョンを確認して「y」と入力して、インストールを開始します。
Need to install the following packages:
nuxt@3.3.2
Ok to proceed? (y) yプロジェクト作成が完了すると、必要なパッケージをインストールする必要があります。
$ cd {プロジェクト名}$ yarn install以下のコマンドでローカルにサーバーを立ち上げて確認できます。
$ yarn devサーバーを起動すると以下のURLにアクセスします。
http://localhost:3000/
以下の画面が表示されれば「Nuxt.js」のプロジェクトが作成されています。
Nuxt3からはこのままTypeScriptが使用でき、使用する場合「<script>」タグに「lang=”ts”」で宣言すればTypeScriptが使用出来ます。
<script setup lang="ts">
</script>ソースディレクトリの変更
通常は開発をそのまま続けると設定ファイルとソースコードが混在してしまいます。
そのためは「src」フォルダ内で開発するようにします。
まずは以下のコマンドで「src」ディレクトリを作成します。
$ mkdir src「nuxt.config.ts」に以下を追加して上書き保存します。
export default defineNuxtConfig({
... 省略
srcDir: 'src',
})「src」フォルダ内に「pages」フォルダを作成し「index.vue」を作成します。
<template>
<div>
HelloWorld
</div>
</template>また「src」ディレクトリに「app.vue」を移動させ「NuxtWelcome」の箇所を「NuxtPage」に置き換えます。
<template>
<NuxtPage />
</template>先ほどアクセスしたURLを表示して、以下の画面となれば「pages」の「index.vue」が認識されたようになります。
「Vuetify」をインストールする
「Vue.js」でマテリアルデザインを使用するためのモジュール「Vuetify」をインストールします。
$ yarn add -D vuetify@next vite-plugin-vuetify sass mdiプロジェクト直下に「plugins」フォルダを作成して、「vuetify.ts」を作成します。
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components
});
nuxtApp.vueApp.use(vuetify);
});また同様に「nuxt.config.ts」に以下の記述をしておきます。
export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'], // 修正
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
}
},
});以下は「Vuetify」を使った例となります。
<template>
<div>
<v-container>
<v-btn
depressed
color="primary"
@click="increment"
>
<v-icon
dark
right
>
mdi-checkbox-marked-circle
</v-icon>
Primary
</v-btn>
<v-btn
depressed
color="error"
>
Error
</v-btn>
</v-container>
</div>
</template> 「Vuetify」のコンポーネント別の情報は以下から確認してください。
https://vuetifyjs.com/en/components/all/
現状把握している問題
2023年4月1日現在では、バージョン3では「nuxt/pwa」が動作していないようです。
ERROR Cannot destructure property 'nuxt' of 'this' as it is undefined. 10:06:25
at pwa (node_modules/@nuxtjs/pwa/dist/pwa.js:733:10)
at installModule (node_modules/@nuxt/kit/dist/index.mjs:452:21)
at async initNuxt (node_modules/nuxt/dist/index.mjs:2476:7)
at async loadNuxt (node_modules/nuxt/dist/index.mjs:2530:5)
at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:540:19)
at async Object.invoke (node_modules/nuxi/dist/chunks/build.mjs:41:18)
at async Object.invoke (node_modules/nuxi/dist/chunks/generate.mjs:39:5)
at async _main (node_modules/nuxi/dist/cli.mjs:49:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.「PWA」でアプリを作成する場合はバージョン2で作るか、対応するまで待った方が良さそうです。