Nuxt 3でタスクリストを作ってみる

更新：2025-03-18
JavaScript

概要

Vue.jsのフレームワーク「Nuxt.js」を使用してタスクリストを作成する。

プロジェクトの作成

/some/directory
npm create nuxt@latest

久しぶりにcreateを実行したら、最初の段階で公式のモジュールを選択できるようになっていたので、@nuxt/eslintと@nuxt/iconを入れておいた。

開発環境の整備

パスエイリアス

/some/directory/nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxt/eslint', '@nuxt/icon'],
  rootDir: 'src'
})

モジュールの追加

/project/directory
npm i dexie nuxt-lodash vue-draggable-next vue-toast-notification
モジュール名簡易説明
dexieIndexedDBを扱いやすくするライブラリ。
nuxt-lodashいろいろ便利な関数があるライブラリ。
vue-draggable-nextドラッグアンドドロップ用のライブラリ。
vue-toast-notificationトースト用のライブラリ。
/project/directory
npm i -D destyle.css sass
モジュール名簡易説明
destyle.cssリセットCSS。
sassSassによるスタイリング。

いろいろメモ

データの永続化

クライアントサイドで完結させたかったので、IndexedDBを使用した。ブラウザを変えたりサイトのデータを消せば消えてしまうので、半永続化ぐらいの感覚かもしれない。

プロトタイプ実装時は、以下の記事を参考にした気がする。
https://qiita.com/yamayamasan/items/a4297e724b86f4a00fd2

入力時の自動保存

@inputで入力のたびにデータを更新すると表示内容とデータに差異が出そうなので、lodashのdebounceを使用して「入力が1秒止まったら」保存するようにした。

/some/directory/nuxt.config.ts
export default defineNuxtConfig({
  ...
  modules: ['@nuxt/eslint', '@nuxt/icon'],
  modules: ['@nuxt/eslint', '@nuxt/icon', 'nuxt-lodash'],
  lodash: {
    prefix: 'lodash',
  },
  ...
})
Usage
const updateText = lodashDebounce((text: string) => {
  // 保存する処理をここに書く
}, 1000);

トースト

まえZennに書いていたものがあった。
https://zenn.dev/namakurajin/articles/177b28414169a2

成果物

https://www.inazumanote.com/

続く...かもね