Help us understand the problem. What is going on with this article?

nuxt.js(v2)でpug/stylusを利用する

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)関連の記事一覧

技術よりの記事

  1. nuxt.js(v2)のインストール〜ESLint設定まで
  2. nuxt.js(v2)の作業ディレクトリを整理
  3. nuxt.js(v2)のベースURLをターミナルからコントロール
  4. nuxt.js(v2)でpug/stylusを利用する
  5. nuxt.js(v2)でIE11対応をする(CSS編)
  6. nuxt.js(v2)でIE11対応をする(JS編)
  7. nuxt.js(v2)で絶対パス(https~)を取得する方法
  8. nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
  9. nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす

よく使うプラグインのお話

  1. nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
  2. nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
  3. nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!

まとめ系

  1. nuxt.js(v2)でgenerate納品する前にやっておきたい設定
  2. nuxt.jsにおける「components」ディレクトリの規約(案)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away