ロケールによってメッセージや項目名などの言語を切り替える仕組みですが、今回は単にVueテンプレートに埋め込む文字列を別ファイルに切り出したかったので使ってみます。 インストール yarn add vue-i18n@next 設定 src/main.ts import { createApp } from …

複数のモジュールを登録する方法 how to use modules in vuex4.0 · Issue #1833 · vuejs/vuex · GitHub src/store/index.ts import { store as authStore, key as authKey } from "@/store/AuthStore"; const stores = [ { store: authStore, key: authKey, …

Vue3ではprovide/injectによる状態管理が推奨されているようなので使うつもりはなかったが、Global Before Guardsを使ったログイン状態によるページ制御をしようとした際にVueRouterでどう参照するのかわからなかったので使ってみる。 Vuex4になってTypeScri…

ログインしてない状態で、ログインが必要なページが要求された場合にログイン画面へリダイレクトさせたい。 Vue RouterのGlobal Before Guardsという仕組みで実現できるようなのでやってみた。 Navigation Guards | Vue Router src/router/index.ts import {…

vee-validateはバリデーション処理を行うためのライブラリ。 インストール yarn add vee-validate@next yarn add yup ※yupは必須チェックや桁数チェックなど、チェック処理をまとめたライブラリ Element+と組み合わせて使う バリデーションは、各項目へのバ…

ログイン画面はヘッダー、フッターを表示。それ以外の画面ではヘッダー、サイドメニュー、フッターを表示といった形で画面ごとにレイアウトを切り替えたい。 Nuxtだとlayout プロパティを使って切り替えれるみたいだけどVue.jsではそのような仕組みがないよ…

カスタムコンポーネントのv-modelは下記の通りと説明されているがどうも動作がおかしい、、、 <ChildComponent v-model="pageTitle" /> <ChildComponent :value="pageTitle" @input="pageTitle = $event" /> どうもVue 3になって仕様が変わったらしい。詳細は、、、 v-model | Vue.js <ChildComponent v-model="pageTitle" /> <…</childcomponent></childcomponent></childcomponent>

input, radio, select, checkboxあたりの部品に触ってみる Element Plus - The world's most popular Vue 3 UI framework <template lang="pug"> el-form el-form-item(label="Text") el-input( placeholder="Email Address" name="email" v-model="formModel.email" clearable ) </template>…

UIライブラリを探していたらまだVue.js 3系に対応しているものが少ないようで、その中でも比較的Element+が良さそうだったので触ってみた。 インストール Element Plus - The world's most popular Vue 3 UI framework yarn add element-plus ※例によってプ…

標準のSuspense機能では、下記のようなちょっと不便な点があるようなので他サイトを参考に独自のSuspense機能を作成する コンポーネント化する必要がある 初回のロードのみで再ロードに対応していない components/MySuspense.vue <template lang="pug"> div template(v-if="status</template>…

Suspenseとは？ コンポーネントを非同期で読み込むための機能らしい。 非同期で読み込む部分を<Suspense>でラップし、読み込むコンポーネントを<template #default>に定義し、フォールバックコンテンツを<template #fallback>に定義する service/UserService.ts /* eslint-disable require-jsdoc */ import axi</template></template></suspense>…

スロットとは？ 親コンポーネント側で子コンポーネントの表示内容をガチャガチャやるための仕組み 名前付きスロット 子コンポーネント <template lang="pug"> div slot(name="header") p header（slotの中身はフォールバックコンテンツ・指定がなければこの内容を表示） slot(name</template>…

リクエスト中にページ遷移すると、もう必要ないのにバックエンドでは実行中のリクエスト達がひたすら応答を待ち続けていました。 あまり好ましくないのでページ遷移の際にこいつらを駆逐することにしました。 ポイントは3つ！！！ リクエストの際、CancelTok…

router/index.ts このパラメータ「id」を取得したい { path: '/users/:id', name: 'UserDetailPage', props: true, component: () => import('@/views/UserDetailPage.vue'), }, ↑で「props: true」を定義した上で、以下のように取得した ※props引数から取得…

インストール yarn add vue-router@^4.0.3 src/router/index.ts を作成 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Home", component: () => import("@/views/Home.vue"),</routerecordraw>…

セットアップ yarn add axios vue-axios /main.ts import {createApp} from 'vue'; import router from './router'; import App from './App.vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; createApp(App).use(router).use(VueAxios,…

下記のようなエラーが発生した Uncaught TypeError: (intermediate value)() is undefined コード: <template lang="pug"> div table tr th ID td input(type="text" v-model="model.id") tr th Password td input(type="password" v-model="model.password") tr td(colspan="2") </template>…

Providerパターンとは？ provide/inject APIを利用して、「状態やロジック」をコンポーネント間で共有する components/SimpleStore.ts import {ref, inject, provide} from 'vue'; const key = Symbol(); const createStore = () => { const count = ref(0);…

インストール yarn add -D pug pug-plain-loader yarn add -D sass node-sass sass-loader ※sassは不要かと思ったら、エラー（Preprocessor dependency "sass" not found. Did you install it?）が発生したので追加 使ってみる template、styleタグにそれぞ…

パッケージのインストール $ yarn add -D eslint prettier eslint-config-prettier eslint-plugin-vue@next セットアップ $ yarn eslint --init yarn run v1.22.5 warning package.json: No license field √ How would you like to use ESLint? · style √ Wh…

Viteとは？ ViteはVue.jsの作者のEvan You氏が作成したビルドツール。 開発時は ES モジュールをそのままインポートするため、バンドル処理が不要で高速に動作するらしい。 インストール～開発サーバの起動 yarn create @vitejs/app vite-sample --template …

①プラグインを作成する プロジェクト/src/plugins/MomentPlugin.ts import Moment from "moment"; export const MomentPlugin = { install: (_Vue: any, options: any) => { // globalPropertiesは、Vue 2.x における Vue.prototype _Vue.config.globalPrope…