旅好きエンジニアのメモ

旅のこと映画、統計、会計、プログラミングなど、気の向くままに語ります

vue

Nuxt.jsをfirebaseにデプロイする方法

Nuxt.jsでアプリを作成する hogeがアプリケーション名です。 vue init nuxt-community/starter-template hoge セットアップ cd hoge npm install ローカルで確かめてみる npm run dev 下記にアクセスして問題ないか確かめます。 localhost:3000 firebaseを導…

Nuxt.jsでsvgを使う方法

Nuxtのlintの設定でsvgファイルは閉じタグが強制になっているのでlintを少しカスタムしてあげる必要がありました。 .eslintrc.jsに下記を追加してあげれば大丈夫です。 // add your custom rules here rules: { "vue/html-self-closing": ["error", { "svg":…

vueのプラグインの順番でハマった件

先日、vue-lazyloadを実装しようと組み込んだのですが、 Failed to resolve directive: lazyというエラーが出て機能しませんでした。 公式ページでプラグインを使用する場合は順番守ってね、ということでした。 https://jp.vuejs.org/v2/guide/plugins.html …

railsにvue-test-utilsを入れてみる

前提 webpackは使わない。 node.jsを入れている。 npmを使用出来る ※ webpackを使わない理由は対象をrails5だけに絞っていないからです。 必要なものをinstall npm install --save-dev jest @vue/test-utils vue-jest babel-jest jest-serializer-vue vue-cl…

vue.jsにeslintを設定した話(vscode使っています)

eslintとvue.js用のeslintプラグインをinstallする 今回はグローバルにインストールします。 npm i -g eslint eslint-plugin-vue ※上記はnpmですが、yarnでも大丈夫です。 vscodeに読み込ませるnode_moduleを設定 vscodeの"基本設定=>設定"のUser Settingsの…

vue.jsのデリミタ(delimiter)を変更する方法 sampleとしてjinja2を使用

フロントエンドのフレームワークと既存のテンプレートエンジンのデリミタ(delimiter)って被ってしまった。。。 ちなみにデリミタ(delimiter)とは、"フィールド区切り文字"のことです。 具体的には railsのerbの<% hogehoge %>とか jinja2の{{ hogehoge }}と…