Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vuejs

Uncaught ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined を解決する

参照したページ コンパイル時フラグ | Vue.js vue.js - ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined - Stack Overflow 環境 私の環境で今回の件に関係ありそうなパッケージのバージョンは以下の通りです。 webpack: 4.46.0 vue: 3.4.21 vue-route…

Vue2からVue3への移行作業で出た Failed to resolve component: router-view If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. を解決する

解決方法 以下のようになっている router プロパティを import { createApp } from 'vue'; import router from './router.js'; import App from './app.vue'; const app = createApp({ router, components: { App, }, }); app.mount('#app_regular_users_cre…

Vue2からVue3への移行作業で出た Error: Provide the "history" option when calling "createRouter()" を解決する

参照したページ [Solved] Uncaught Error: Provide the “history“ option when calling “createRouter()“ | ProgrammerAH javascript - Failed to resolve component <router-view> VueRouter - Stack Overflow 概要 vue-router を使っているアプリケーションを移行する際</router-view>…

VueのOptionsAPIのときに取得していたthis.$elはCompositon APIではどのように取得するのだろうかという話

参考にさせていただいたページ vue.js - Vue 3 Composition API - How to get the component element ($el) on which the component is mounted? - Stack Overflow どうやるか 「vue.js - Vue 3 Composition API - How to get the component element ($el) o…

Vuetifyのv-menuが表示されたときや非表示になったときに何か処理をしたい Vuetify 2.x その0001

参考にさせていただいたページ javascript - How disable to select minutes in v-time-picker widget? - Stack Overflow 今日の環境 vue: 2.6.11 vuetify: 2.5.4 @vue/composition-api: v1.0.0-beta.22 はじめに Vue2のcompositon apiなので、Vue3だとまた…

highcharts-vueのコンポーネントに渡すpropsの型 highcharts-vue 1.x + TypeScript その0001

参考にさせていただいたページ highcharts/highcharts-vue GitHub GitHub - highcharts/highcharts-vue highcharts 公式ドキュメント Highcharts JS API Reference 今回使用しているバージョン highcharts-vue v1.4.0 を使用していて、highcharts v9.2.2に依…

ReactとかVueで開発するときのディレクトリ構造について考えてみた

はじめに どこかにメモしておこうと思って一旦ここに書いてみました。 ディレクトリ構造 src ├── assets │ ├── css │ │ └── reset.css │ ├── img │ │ ├── example1.png │ │ └── example2.png │ └── scss │ └── base │ ├── default.scss │ └── global-variabl…

Vue CLIを使ってみる

参考にさせていただいたページ Vue CLIのインストールまたは最新化 Installation | Vue CLI Creating a Project Creating a Project | Vue CLI 今日の環境 macOS Monterey 12.1 node v16.13.1 npm 8.1.2 yarn 1.22.17 @vue/cli@4.5.15 グローバルにインスト…

rails5 + webpacker4 + vue-loader15.7.0 で単一VueコンポーネントにSCSSを書く

参考にさせていただいたページ GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails はじめに webpackerよくわからなくてハマったときのメモです。 config/webpack/loaders/vue.js webpackであれば、webpack.config.jsの…

Nuxt.js 2.x + TypeScript 4.x その0010 FontAwesome5のアイコンをpropsから渡すときの型を設定する

はじめに 以前書いた「Nuxt.js 2.x + TypeScript 4.x その0004 FontAwesomeの必要なアイコンだけ読み込んで使う - Motomichi Works Blog」みたいな感じでimportしたアイコンを、例えば自分で作ったMyComponentに渡すときにMyComponentのpropsの型はどのよう…

Nuxt.js 2.x + TypeScript 4.x その0008 Vue.extend()でやっている場合のmixin

はじめに 検索すると、クラスベースで書いてデコレータを使う方法については多くヒットしますが、Vue.extend()で書いている場合の方法についてはあまりヒットしなかったのでこの記事を書いています。 特に変わったことは書いていませんが。 今日の開発環境 N…

Nuxt.js 2.x + TypeScript 4.x その0007 storeの型を設定する

参考にさせていただいたページ 基本的なタイピング 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 定義する 「基本的なタイピング」をよく読むとよい。 ReturnType<typeof state> を使って、stateの型を定義する GetterTree, ActionTree, MutationTree を使う GetterTree</typeof>…

Vue.js 2のエラーを解決する [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.

はじめに 特にwebpackなどを使用して、Vue.jsをこれからはじめようという方に多いとは思いますが、以下のようなエラーがコンソールに出力されることがあります。 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is n…

Nuxt.js 2.x + TypeScript 4.x その0005 ビルド時にJavaScript heap out of memoryなってしまう問題の解決

参考にさせていただいたページ Vue.extendとnameオプションについて API — Vue.js | Vue.extendについて API — Vue.js | nameオプションについて メモリの割り当てを増やす Nuxt (+TS) の開発サーバーがメモリ不足でクラッシュする事象を暫定的に回避する Ja…

Nuxt.js 2.x + TypeScript 4.x その0006 アプリケーションのsrcを一階層深いところに格納する(srcDirの設定を変更する)

参考にさせていただいたページ Nuxtのaliasプロパティについて The alias Property - NuxtJS NuxtのrootDirについて rootDir プロパティ - NuxtJS NuxtのsrcDirについて The srcDir Property - NuxtJS TypeScriptのimportパスの解決について TypeScript: Doc…

Nuxt.js 2.x + TypeScript 4.x その0004 FontAwesomeの必要なアイコンだけ読み込んで使う

参考にさせていただいたページ nuxt-fontawesome - npm Nuxt.jsでFontAwesomeを使う方法。必要なアイコンだけインポートする! - Qiita 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 パッケージをインストールする パッケージを4つインストールします。 ya…

VeeValidateでcheckboxのfalseを許容しない場合のrules

checkboxでfalseを許容しない場合のrules falseでも値があればバリデーションが通ってしまうっぽいので、ValidationProviderに以下のような感じでオブジェクトを渡すと良いかも。 rules="{ required: { allowFalse: false } }" 例えば以下のようになる。 <ValidationProvider v-slot="{ errors }" rules="{ required: { allowFalse: false } }"> 〜</validationprovider>…

Nuxt.js 2.x + TypeScript 4.x その0002 ファイルを保存したときに自動整形する

参考にさせていただいたページ Nuxtのeslintについて GitHub - nuxt-community/eslint-module: ESLint module for Nuxt.js TSのランタイムlintについて Lint - Nuxt TypeScript 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 前提 npx create-nuxt-appした…

Nuxt.js 2.x + TypeScript 4.x その0001 公式の GET STARTED をやってみる

参考にさせていただいたページ GitHub nuxt/create-nuxt-app create-nuxt-app/README.md at master · nuxt/create-nuxt-app · GitHub 公式ドキュメント 日本語: インストール - NuxtJS 英語: Installation - NuxtJS 今日の開発環境 Nuxt 2.14.12 TypeScript …

templateにコメントを書いて「warning 'v-html' directive can lead to XSS attack vue/no-v-html」の警告を個別に無効化する

参考にさせていただいたページ disable eslint in vue template · Issue #260 · vuejs/eslint-plugin-vue · GitHub 範囲を無効化する 以下のように書くと、任意の複数行を無効化できるらしいです。有効化も忘れずにしましょう。 <div class="hoge" v-html="foo" /> あと以下の sanitize-html</div>…

computedでglobal変数をreturnしているvmをvue-test-utilsでtestする | Vuex + vue-test-utils その0001

参考にさせて頂いたページ Mounting Options | Vue Test Utils 要約すると 要約すると「任意のcomputedを上書きしてからtestを実行する。」ということになります。 例 例えばプロダクトのコードで、 window.gon = { hoge: 'example_value' } を用意して、こ…

Vue.jsでもデザインと振る舞いを分ける(Presentational ComponentとContainer Component について)

参考にさせて頂いたページ Vue Loader公式 SFC Spec | Vue Loader 色々 React/Reduxを約三年間書き続けてきたので知見を共有します - Qiita Presentational ComponentとContainer Component について 日本語訳: Presentational and Container Components – …

webpackでビルドする前にeslintで.vueと.jsの構文チェックをする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0004

参考にさせて頂いたページ webpack.config.jsについて Configuration | webpack eslintについて Command Line Interface - ESLint - Pluggable JavaScript linter eslint-loaderのoptionsについて GitHub - webpack-contrib/eslint-loader: eslint loader (f…

.vueファイルの中にscssを書けるようにする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0003

参考にさせていただいたページ 【webpack】vue&type=style&index=0&lang=scss - Qiita プリプロセッサの使用 · vue-loader TextField.vueを編集する src/javascripts/vue_applications/common/components/TextField.vueのtemplate に以下の通り追記します。 <div class="mod-error-messages"> <ul class="mod-error-messages__list"></ul></div>…

vue-test-utils + jestを追加する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0002

参考にさせて頂いたページ テストを実行する環境の構築 GitHub - vuejs/vue-test-utils-jest-example: Example project using Jest + vue-test-utils together GitHub - babel/babel-bridge: A placeholder package that bridges babel-core to @babel/core.…

Vuexを使用する基本的なビルド環境を構築する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0001

はじめに Windowsでもできます。 MacやUbuntuなどでもできると思います。 これから何回かに分けてnpm initするところから、以下のようなことをできる環境を構築していきます。 webpack4 + babel7 を使ってビルド vue-test-utils + jest を使ってテスト実行 e…

webpack4.x+vue.js 2.x+vue-loaderでビルド環境を構築する その0001 導入

参考にさせて頂いたページ vue-loaderを使うときのwebpack.config.jsの記述内容について Getting Started | Vue Loader .babelrcについて 1年前に作ったフロントエンド環境を色々新しくした - Qiita 包括的にwebpack 4 入門 webpack 4 入門 - Qiita 包括的に…

vue.js 2.x その0004-02 アコーディオンを作る(jQueryのslideToggleみたいなものを作る)

はじめに 以下の記事で書いたコードを少しマシな感じに書き直しました。 vue.js 2.x その0004 アコーディオンを作る(jQueryのslideToggleみたいなものを作る) - Motomichi Works Blog サーバーサイドから動的な値がwindow.itemsで書き出される想定で書いてい…

webpack3.x+vue.js 2.x+vue-loaderでビルド環境を構築する

参考にさせて頂いたページ Vue.js Vueコンポーネントのユニットテストを書いてみよう - Qiita 最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA ベーシックなWebpackの導入と設定 - Qiita 過…

vuex2.xその0005 namespaced:trueにしたmodule用のオブジェクト構造をひとつ定義して使いまわす

参考にさせて頂いたページ モジュール · GitBook はじめに namespaced:trueにプロパティ設定したオブジェクトをstore.registerModule()で複数回登録します。 ひとつのmodule用オブジェクト、ひとつのcomponent用オブジェクトを使いまわしできるようにしてみ…