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.

続きを読む

タイトルがわかりにくくて申し訳ないんですが、エディターが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.

続きを読む

勉強がてらTypeScriptで運営してるサービスを作りなおしているんですが、mongooseのところでちょっとハマったのでメモします。 monooseをインストールして、型定義ファイルもインストールします。 command 1 $ npm i -S mongoose $ typings install -SG dt~mongoose TypeScriptファイルにmongooseをimportします。 command 1 import * as mongoose from 'mongoose'; これでコンパイルすると、 command 1 Error TS2307: Cannot find module 'mongodb'. mongodbがないよ。と怒られるのでインストールします。 command 1

続きを読む

プロフィール画像

こたぽん

JavaScript, React, NextJS, VueJS, NuxtJS, AWS, Firebase, Git, ビールと生ハムが好き

Rakuten, Inc. CyberAgent, Inc.