Nuxt.js v2.9.0のリリースノートにあるように、 v2.9.0 からTypeScriptが外部からのサポートになりました。以前からNuxtでTypeScriptを使うときは色々設定したり、 Lintまわりが複雑だったり、コーディングをはじめるまで時間がかかったものの、しばらくすると最新が変わってたり・・・。 今回は2019年11月時点で、Nuxt.js + TypeScriptと IntelliJ IDEA で使えるまでを紹介します。 Nuxtのプロジェクトを作る $ npx create-nuxt-app example よくこのコマンドを見ますが、最新の create-nuxt-app を使うためには、 yarn create nuxt-app を使ったほうががいいかもしれません。 $ yarn create nuxt-app example yarn create v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... info @google-cloud/functions-emulator@1.0.0-beta.5: The engine "node" is incompatible with this module. Expected version "~6". Got "10.13.0" info "@google-cloud/functions-emulator@1.0.0-beta.5" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] 🔗 Linking dependencies.

続きを読む

buefyはVue.js用にBulmaを軽量化したUIコンポーネントです。Vue用のCSS Framework、UIコンポーネントは色々ありますが、現時点ではBulmaで落ち着いてます。buefyでアイコンを扱う場合、ドキュメントではMaterial Design IconsとFontAwesomeの2択で書かれてます。今回は、個人的に気に入ってるFontAwesomeをbuefyで使うまでの方法をメモして紹介します。 環境 Nuxt.js v2 nuxt-buefy v0.2.3 (現時点でv0.3以上では起動できませんでした) fortawesome v1.0.9 buefyをインストール Nuxt.jsを使う場合は、このページの下の方に書かれています。 command 1 $ yarn add nuxt-buefy ※versionが0.2.3になってるか確認 nuxt.config.js に下記を記載すれば buefy のインストールは終わりです。めちゃ簡単。 nuxt.config.js 1 2 3 4 5 6 7 8 9 10 11 12 { modules: [ // Simple usage 'nuxt-buefy', // Or you can customize ['nuxt-buefy', { css: false, materialDesignIcons: false }], ] } FontAwesomeをインストール command 1

続きを読む

タイトルがわかりにくくて申し訳ないんですが、エディターがIntelliJで、Vue, NuxtをTypeScriptでコーディングする環境の際、 vue-class-component のNuxt版、 nuxt-class-component を使えばNuxtでTypeScriptでコーディングできるんですが、メソッド内で this.$route を参照する際に下記のように implements をつけます。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 <script lang="ts"> import Vue from 'vue'; import {Route} from 'vue-router'; import Component from 'nuxt-class-component'; interface WithRoute { $route: Route; } @Component export default class Index extends Vue implements WithRoute { created() { console.log(this.$route.params); } } </script> そうすると、以下の画像のようなエラーが出ました。

続きを読む

最近Vue.jsを勉強してます。Nuxt v2が半年ほど前にアナウンスされ、先日ようやくリリースされました。良い機会なのでTypeScriptで開発できる環境構築をメモしておきます。Vueファイル内のHTMLはPug(Jade)にします。 Nuxt.js v2 TypeScript eslint nuxt-class-component Pug(Jade) Nuxt.js v2 setup vue cli を使うのでインストールしておきます $ npm i -g vue-cli スターターテンプレートから始めます。Nuxtのインストールはこちらを参考にしてます。 https://ja.nuxtjs.org/guide/installation $ vue init nuxt-community/starter-template example $ cd example $ yarn or npm i(以下yarn) これを書いてる現時点ではversionが 1.0.0 のままなので、 yarn remove して再インストールします。 $ yarn remove nuxt $ yarn add nuxt package.json を開いて確認してみてください package.json 1 2 - "nuxt": "^1.0.0" + "nuxt": "^2.

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

フロントエンドエンジニア

Tokyo