【最速】Nuxt3 を検証!ボイラープレートを作りました

まもなく、2022年6月に安定板がリリース予定のNuxt3 を利用して、実務レベルのアプリケーション開発にどこまで利用できるのか検証してみました。

完成したNuxt3のボイラープレート

MITライセンスにて公開しています。ご利用の方は以下のリポジトリからFork してご利用下さい。

https://blog.isystk.com/web_production/vue/1675/

デモページ

Nuxt3 & Vuetify で作成しており、TailwindCSS も利用しています。
インフラは、Amplify (Cognito/AppSync/DynamoDB) で構築していて、
GraghQL でデータの取得・更新をしています。
Storybook も導入してみました。

https://dev.dl83z1vvxx26n.amplifyapp.com

検証してみたもの

  • UIコンポーネントにVuetify3 を利用できるか
  • TailwindCSS (Sass)を利用できるか
  • Amplify (Cognito、AppSync、DynamoDB) が利用できるか
  • フォームバリデーションライブラリ を利用できるか
  • 多言語化(i18n)を利用できるか
  • Head管理 (TitleやDescription)は出来るか
  • Storybook を利用できるか
  • テストフレームワークを利用できるか
  • SSG を利用できるか

UIコンポーネントにVuetify3 を利用できるか

結論:◎(問題なし)

Vue.js で利用できるUIコンポーネントには様々ありますが、今回は Vue.js で人気の高い Vuetify を利用してみました。

Vuetify3 自体はベータ版であるものの、開発に必要なコンポーネント群は揃っていて不足を感じることはありませんでした。

Stockbook でも問題なく利用できたので実用レベルだと感じています。

TailwindCSS (Sass)を利用できるか

結論:○(ほぼ問題なし)

Nuxt3 で TailwindCSS を利用する分には全く問題ありませんでしたが、Storybook でTailwind を利用する場合には、TailwindCSSがPostCSS8を必要とするのに対して、StorybookはがデフォルトでPostCSS7で動いてる為、正しく動作しませんでした

回避策として、TailwindCSS のバージョンを "tailwindcss": "npm:@tailwindcss/postcss7-compat" とすることで、Nuxt3 ・ Storybook で共に利用できるようになりました。詳細は下記の記事にまとめております。

Amplify (Cognito、AppSync、DynamoDB) が利用できるか

結論:○(ほぼ問題なし)

Amplify はクライアントで動作するライブラリになるので、SSR で利用することは出来ませんが、SPA として開発する分には問題なく利用できました

いくつか問題が発生しましたが、回避策を以下の記事に纏めました。

フォームバリデーションライブラリ を利用できるか

結論:◎(問題なし)

vee-validate , yup を利用しました。React などで利用されているYup と同じような感覚で利用できました。 vee-validate は latest版はVue3 に対応していないので、@next でインストールする必要があります。

yarn add vee-validate@next yup
<Form
      v-slot="{ errors, values, setFieldValue }"
      :validation-schema="schema"
      :initial-values="initialValues"
      @submit="onSubmit"
    >
	<div class="mt">
    <div class="mb-4">
			<Field
	      name="title"
	      type="text"
	      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
	      :class="{ 'is-invalid': errors.title }"
	    />
	    <ErrorMessage class="text-red" name="title" />
		</div>
		<div class="mb-4">
      <v-btn depressed color="primary" type="submit"> 登録 </v-btn>
    </div>
  </div>
</Form>
<script setup lang="ts">
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as Yup from 'yup'
const schema = Yup.object().shape({
  title: Yup.string().required('タイトルを入力してください'),
})
export type FormValues = {
  title?: string
}
const initialValues = {title : ''}
const onSubmit = async (values: FormValues) => {
    console.log(values)
}
</script>

多言語化(i18n)を利用できるか

結論:◎(問題なし)

Nuxt3 では、i18n ではなく、@intlify/nuxt3 を利用するようですが、使い方は、i18n と同じように利用できました。

yarn add @intlify/nuxt3

nuxt.config.ts

const nuxtConfig = defineNuxtConfig({

  ・・・

  intlify: {
    localeDir: 'locales',
    vueI18n: {
      locale: 'ja-JP',
    },
  }
})

export default nuxtConfig

src/locales/ja.json

{
  "login": "ログイン"
}
<NuxtLink :to="Url.LOGIN" class="invisible md:visible">
  {{$t('login')}}
</NuxtLink>

Head管理 (TitleやDescription)は出来るか

結論:○(ほぼ問題なし)

Vue3 では、vue-head などのライブラリを利用してHead を管理しますが、Nuxt3 ではデフォルトで Head管理ができる仕組みが用意されています。

src/layouts/default.vue

<script lang="ts" setup>
import { injectStore } from '@/store'
import { name, description } from '../../package.json'
useHead({
  titleTemplate: `%s - ${name}`,
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { name: 'format-detection', content: 'telephone=no' },
    { name: 'description', content: description }
  ],
  link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
})
</script>

src/pages/login/index.vue

<script setup lang="ts">
useMeta({
  title: 'ログイン',
})
</script>

Storybook を利用できるか

結論:○(ほぼ問題なし)

Nuxt用のStorybook である @nuxt/storybook が、Nuxt3 に未だ対応できていないため、@storybook/vue3 を利用しましたが、問題なく動作することを確認しました。

yarn add -D @storybook/vue3 @storybook/builder-vite @storybook/addon-essentials @storybook/addon-links storybook-builder-vite storybook-vue3-router 

TailwindCSS を導入している場合は注意が設定に必要でした。詳細は下記の記事にまとめております。

テストフレームワークを利用できるか

結論:◎(問題なし)

フロントエンドのテストフレームワークとして、 jest がよく利用されますが Nuxt3 では、vitest を利用することで同等のことが実現できるようです。詳細は下記の記事にまとめております。

SSG を利用できるか

結論:◎(問題なし)

MicroCMSで投稿した記事を 自動的にSSGで生成して、GithubPages で公開するといったことが問題なく実現できました。MicroCMS と GithubPage を利用してJamStackなブログアプリケーションを作成してみたので、詳細は下記の記事にまとめております。

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。