pugやstylusなどのインデント記法は、見やすく、そして、誰が書いても綺麗になる(整形ツールいらない)ので好き。
nuxtでは、NPMパッケージをインストールするだけで使える。素晴らしい。
nuxt.js(v2)は設定済みの想定
↓
nuxt.js(v2)の導入方法
1.NPMパッケージをインストール
本体とコンパイルするためのlodaerをインストール
※nuxt.js(v2)から、pug-plain-loaderが必要になっている。忘れずに。
// pug
$ npm i pug pug-loader pug-plain-loader
// stylus
$ npm i stylus stylus-loader
2.動作確認用の記述
pages/index.vueに動作確認用の記述をする。
<template lang="pug">
.container
h1.red Hello {{ name }}!
</template>
<script>
export default {
data () {
return {
name: '名前'
}
}
}
</script>
<style lang="stylus">
.container
background-color red
height 100vh
display flex
align-items center
justify-content center
.red
color #fff
</style>
3.動作確認
$ npm run dev
以上…なんだこの簡単さは。すごいぞnuxt!
おまけ
scssを利用したい場合は、
// pug
$ npm i pug pug-loader pug-plain-loader
// scss
$ npm i node-sass sass-loader
<template lang="pug">
.container
h1.red Hello {{ name }}!
</template>
<script>
export default {
data () {
return {
name: '名前'
}
}
}
</script>
<style lang="scss">
.container {
background-color: red;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.red {
color: #fff;
}
</style>
でインストール。
Link
以下、公開中のnuxt.js(v2)関連の記事一覧
技術よりの記事
- nuxt.js(v2)のインストール〜ESLint設定まで
- nuxt.js(v2)の作業ディレクトリを整理
- nuxt.js(v2)のベースURLをターミナルからコントロール
- nuxt.js(v2)でpug/stylusを利用する
- nuxt.js(v2)でIE11対応をする（CSS編）
- nuxt.js(v2)でIE11対応をする（JS編）
- nuxt.js(v2)で絶対パス(https~)を取得する方法
- nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
- nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす
よく使うプラグインのお話
- nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
- nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
- nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!