Nuxt.js3 を利用してWebアプリケーションを作成する

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

デモ

主な機能

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

プロジェクトの概要

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

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

Vue の状態管理ライブラリには Vuex の代わりに、Pinia を利用しています。大まかな使い方としては同じですが、

  • ストアの内容を this で取得する
  • mutations がなく action 内で state の値を直接変更できる

という点がPinia を利用するメリットと考えています。

利用している技術

  • Nuxt.js3
  • Pinia (状態管理)
  • Typescript 4.5
  • Tailwind Css

Nuxt3の特徴

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

一覧表示

components/pages/posts/List.vue

<template>
  <section v-for="e in posts" :key="e.id">
    <NuxtLink :to="`${$C.URL.POSTS}/${e.id}`">
      <div class="entry-header">
        <div class="category_NuxtLink">{{ e.tagName }}</div>
        <h2 class="entry-title">{{ e.title }}</h2>
        <div class="entry-meta">
          <span>{{ e.regist_datetime_yyyymmdd }}</span>
        </div>
      </div>
      <div class="entry-content">
        <img
          alt="sample1"
          width="300"
          height="174"
          :src="e.photo"
          class="attachment-medium size-medium wp-post-image"
        />
        <p>{{ e.description }}</p>
        <div class="clearfix"></div>
      </div>
    </NuxtLink>
  </section>
</template>

<script lang="ts" setup>
import { usePostsStore } from '@/stores/posts'

const postsStore = usePostsStore()

// mounted
onMounted(async () => {
  await postsStore.fetchPosts()
})

const posts = computed(() => postsStore.getPosts())
</script>

stores/posts.ts

import { inject, ref } from 'vue'
import { defineStore } from 'pinia'
import { API } from '@/utilities'
import { getApiEndpoint } from '@/common/constants/api'
import { useRuntimeConfig } from '#app'
import { Data, Post, Posts } from '~/@types/Posts'

type PostDisplay = Post & {
  id: string
  regist_datetime_yyyymmdd: string
}

export const usePostsStore = defineStore('posts', () => {
  const config = useRuntimeConfig()
  const posts = ref<Posts>({})

  // method
  const getPosts = () => {
    const _ = inject('lodash')
    return _.map(posts.value, function (e: Data<Post>) {
      return getDisplayPosts(e)
    })
  }
  const getPost = (id: string) => {
    const e = posts.value[id]
    return getDisplayPosts(e)
  }
  const getDisplayPosts = (e: Data<Post>): Partial<PostDisplay> => {
    if (!e) {
      return {}
    }
    const moment = inject('moment')
    const data = e.data
    return {
      id: e.id,
      ...data,
      regist_datetime_yyyymmdd: data.regist_datetime
        ? moment(data.regist_datetime).format('YYYY/MM/DD')
        : '',
    } as PostDisplay
  }
  const fetchPosts = async () => {
    const _ = inject('lodash')
    const response = await API.get(getApiEndpoint(config).POSTS)
    posts.value = _.mapKeys(response, 'id')
  }
  const fetchPost = async (id: string) => {
    const response = await API.get(`${getApiEndpoint(config).POSTS}/${id}`)
    posts.value = { ...posts.value, [id]: response }
  }

  return {
    getPosts,
    getPost,
    fetchPosts,
    fetchPost,
  }
})

開発環境の構築

ソースコード

MIT ライセンスにてコードを公開していますのでご利用下さいませ。

https://github.com/isystk/nuxt3-typescript-aws

ディレクトリ構造

.
├── src/ (Nuxt.js のソースコード)
│   ├── assets/
│   ├── auth/
│   ├── common/
│   ├── components/
│   ├── layouts/
│   ├── mixins/
│   ├── pages/
│   ├── plugins/
│   ├── store/
│   ├── test/
│   └── utilities/
└── package.json/

起動方法

$ yarn
$ yarn dev

コメントを残す

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

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