昔はReact派だった僕も、いまとなってはJavaScriptの書き方的にはReactでもVueでもどちらでも構わないぐらいになってきました。
NextJSとNuxt.jsを比べると、CSSの管理の仕方がNuxt.jsの方が好き、というかSFCが好きなので、どっちでも良いと言われた時は、もっぱらNuxt.jsでプロジェクトをつくってます。
Nuxt.jsでプロジェクトをつくる時、TypeScript（+ nuxt-property-decorator）とSCSSは必ず
導入しておきたくて、導入手順のメモを残しておこうと思います。
導入手順
Nuxt.jsでプロジェクトを作成
yarn create nuxt-app <project-name>
npmでもyarnでも良いのですが、最近はyarn派です。
一回、yarn + Nuxt.js + TypeScriptでハマったこともあるのですが、最近は安定しているので、安心してyarnを使ってます。
? Project name: プロジェクト名 ? Programming language: TypeScript ? Package manager: Yarn ? UI framework: None ? Nuxt.js modules: Axios ? Linting tools: ? Testing framework: Jest ? Rendering mode: Universal (SSR / SSG) ? Deployment target: Server (Node.js hosting) ? Development tools: ? Continuous integration: None ? Version control system: Git
Rendering modeとDeployment targetは環境に併せますが、プロジェクトをつくる時の選択肢はだいたいこんな感じです。
これでTypeScriptは導入完了です。
nuxt-property-decoratorの導入
yarn add nuxt-property-decorator
でOKです。
かつて、
yarn add -D nuxt-property-decorator
で導入してハマったことがあったので、必ずdependenciesに追加するようにしています。
tsconfig.jsonの編集
"strictPropertyInitialization": false
を追加してます。
SCSSの導入
yarn add -D sass-loader node-sass @nuxtjs/style-resources
でOKです。
厳密には@nuxtjs/style-resourcesは必須ではないのですが、グローバルでSCSSを読み込みたいので導入してます。
nuxt.config.jsonに、
styleResources: { scss: [ '~/assets/css/variable.scss', '~/assets/css/extend.scss', '~/assets/css/mixin.scss', '~/assets/css/keyframe.scss' ] }
と追加して、変数やmixinを全ファイルから呼び出せるようにしているのですが、近々SASSに名前空間が導入されるみたいなので、いずれは変更しなければならないのだろうなと思っています。
