Motomichi Works Blog

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

nuxtjs

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 その0009 Sassの変数やmixinを全てのコンポーネントで使えるようにする

参考にさせていただいたページ 《Nuxt.js》Sassの共通の変数やmixinを一括で各コンポーネントに読み込む方法。 - Qiita GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements! style-resources-module のインストール 「…

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>…

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…

Nuxt.js 2.x + TypeScript 4.x その0003 Sassを使えるようにする

参考にさせていただいたページ 公式ページ css プロパティ - NuxtJS その他のページ Nuxt.jsプロジェクトでDart Sassを使う | kimulaco blog 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 パッケージのインストール 公式ページに倣って以下の通りインスト…

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 …