Nuxt3 & Vuetify3 を利用してWebアプリケーションを作成する

Nuxt3 & Vuetify3 を利用してWebアプリケーションを作成する

目次

作成したアプリケーション

デモ

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

https://dev.dl83z1vvxx26n.amplifyapp.com

主な機能

  • ログイン/ログアウト
  • 会員登録
  • 投稿一覧
  • 投稿詳細
  • マイページ(一覧・登録・更新・削除)

プロジェクトの概要

Nuxt.js3 を利用した学習用のサンプルアプリケーションです。

Vue3から導入されたCompositionAPIを利用して作成しています。

利用している技術

  • Nuxt.js 3
  • Typescript
  • Vuetify
  • TailwindCSS & Sass
  • Amplify (Cognito/AppSync/DynamoDB)
  • GraghQL
  • Storybook

Nuxt3の特徴

  • 最大で75倍の軽量化
  • Nitro Engineによる高速化
  • ISG(インクリメンタル・スタティック・ジェネレーション)などの高度なモードへの対応予定
  • ナビゲーションの前後を問わず、どのコンポーネントでもデータを取得可
  • Composition APIのネイティブサポート
  • Nuxt CLI登場
  • Nuxt Devtools登場予定
  • Webpack 5に対応
  • Vitaに対応
  • Vue 3のネイティブサポート
  • TypeScriptのネイティブサポート

開発環境の構築

ソースコード

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

https://github.com/isystk/amplify-nuxt3-sample

ディレクトリ構造

 .
├── LICENSE
├── README.md
├── amplify
│   ├── README.md
│   ├── backend
│   ├── cli.json
│   ├── hooks
│   └── team-provider-info.json
├── node_modules
├── nuxt.config.ts
├── package.json
├── src
│   ├── __tests__
│   ├── app.vue
│   ├── assets
│   ├── aws-exports.js
│   ├── components
│   ├── constants
│   ├── layouts
│   ├── locales
│   ├── middleware
│   ├── mixins
│   ├── pages
│   ├── plugins
│   ├── public
│   ├── services
│   ├── store
│   └── stories
├── tailwind.config.js
├── tsconfig.jest.json
├── tsconfig.json
└── yarn.lock

起動方法

$ yarn
$ yarn dev

コメントを残す

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

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