Nuxt.js: TypeScript開発での環境構築 with nuxt-property-decorator & sass

Nuxt.jsでTypeScript開発をする際の初期環境の構築手順を紹介します。HTMLはプレーンHTMLで、CSSはScssを利用する前提での構築となります。
（投稿時点でのTypeScriptバージョンは3.8.3）

Nuxtプロジェクトの作成

yarn create nuxt-app <project_name>

実行すると以下のダイアログ形式で設定内容を決めていきます。(project_name: "nuxt_sandbox")

? Project name (nuxt_sandbox)  # 任意
? Project description (My cool Nuxt.js project) # 任意
? Author name () # 任意
? Choose programming language 
  JavaScript 
❯ TypeScript 
? Choose the package manager (Use arrow keys)
❯ Yarn # 好みで
  Npm 
? Choose UI framework 
❯ None # 好みで
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS
  Vuesax 
  Vuetify.js 
? Choose custom server framework (Use arrow keys)
❯ None (Recommended) # 好みで
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 
? Choose the runtime for TypeScript (Use arrow keys)
❯ Default 
  @nuxt/typescript-runtime 
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios # 好みで
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint # 好みで
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
? Choose test framework (Use arrow keys)
❯ None  # 好みで
  Jest 
  AVA 
? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)  # 好みで
  Single Page App 
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code) # 好みで
 ◯ Semantic Pull Requests

これでインストールが開始されプロジェクトの作成が完了します。

パッケージを最新版にアップデート

初期インストール時にはインストールパッケージが古い場合がありますので、npm-check-updatesを利用して、最新版に更新します。

cd nuxt-sandbox
ncu -u

package.jsonが更新されているので、再度パッケージをインストールします。

yarn

or

npm i

nuxt-property-decorator のインストール

Classスタイルのコンポーネントを利用するには nuxt-property-decorator をインストールします。

yarn add nuxt-property-decorator

Scss利用設定

node-sass, sass-loader パッケージをインストールします。

yarn add -D node-sass sass-loader

or

npm i -D node-sass sass-loader

page/index.vue

最後に page/index.vue をclassスタイルに書き換えてみましょう。

<template>
  <div class="container">
    Nuxt.js
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  name: 'Index'
})
export default class Index extends Vue {}
</script>

<style lang="scss" scoped>
.container {
  // some styles
}
</style>

これで環境構築完了です。あとは yarn dev で起動してみましょう。

Related Posts