herokuを利用してnuxtをSSRでホスティングする。 nuxtプロジェクトを作成する。 プロジェクトはSSRで作成する。 $ yarn create nuxt-app sampleApp $ cd sampleApp SSRを試したいので、/pages配下にsub/_id.vueを作成する。 <template> <div>sub</div> </template> <script> export default { name: '</script>…

無料の範囲でFont Awesomeを利用する方法です。 理解に地味に時間がかかったのでメモしておきます。 fontawesome インストール $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortaw…

vue-i18nを利用して多言語化しているコンポーネントを、storybookに登録した際に以下のエラーが発生しました。 Cannot read property '_t' of undefined こちらの記事を参考に、修正しました。 config.jsに以下を追加します。 import { addDecorator } from …

VuePressのメモです。 VuePressの基礎基礎の続きです。

VuePressとは Vue.jsベースの静的サイトジェネレーターです。 静的サイトジェネレーターとは、Markdownなどで書かれたファイルからHTMLやCSS、JSを生成してくれるツールです。 DBの準備などはいらず、全て静的なファイルになる為、簡単に安心なサイトが作成…

準備 vue-cliでプロジェクトを作成する Jestを利用する。 vue-test-utilsを利用する（vue-cliでプロジェクトを作成した場合はインストール済み)

mixinで共通化をする mixin機能を利用することで、複数のコンポーネントで処理を共通化することができます。 使い方 例えば、以下のようなコンポーネントがあり、createdの処理と、methodsを共通化する為mixinにしたいと思います。 <template> <div :style="style">{{ name }} </div> </template> <style> </style> <script> export …

カスタムディレクティブ v-xxxのようなオリジナルのディレクティブを作成することができる。 ディレクティブのオプション オプション 内容 bind ディレクティブが対象の要素に紐付いたときに1度だけ実行される inserted 紐ついた要素が挿入されたタイミング…

vueではtransitionコンポーネントを利用することで、わりと簡単にアニメーションを実現することができます。 公式を見たほうがより詳しいので、公式を見ることをおすすめします。

Vueで親コンポーネントから子コンポーネントのスタイルを変更する方法です。

無料の範囲でFont Awesomeを利用する方法です。 理解に地味に時間がかかったのでメモしておきます。 fontawesome

Vuexを使うためのメモ。 部分的にしか書いてないので、あまり参考にならないと思います。

Code Splitting Vue cliでプロジェクトを作成した場合にrouter.jsのcode-splittingの記述が気になったので調べてみた。

Vueをやりたかったので、調べたことをメモします。 Vue CLI 3になり、ファイル交際やコマンドなども結構変更になっているようです。