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

Vue.js いろいろ便利な裏技集(随時更新していくよ)

Vue開発してて、これは便利だなって裏技がたくさんあるんですが、すぐ忘れてしまい毎回ググらないで済むよう、自分用のメモのつもりでまとめておきます。他にもこんなんあるで!ってのあればぜひ教えてくださいね。

ローカル開発中、ホットリロードの度にブラウザのコンソールをクリア

コンソールがエラーだらけになってると、ちゃんとコンパイル通ったかよくわからなくなりますよね。そんな時はこちら。変更を保存してホットリロードされる度にコンソールが綺麗になります。

main.js
if (module.hot) {
  module.hot.accept()
  module.hot.addStatusHandler(status => {
    if (status === 'prepare') console.clear()
  })
}

親子コンポ間の双方向バインディングには$emitよりv-model

ネットでほとんど事例が見つからないので、これはv-modelの正しい使い方なのかよくわかりませんが、エラーもWarningも出ずにきちんと動きます。ネストされた複雑なオブジェクトでもマルッと子コンポーネントに渡して、双方向バインディングができます。子だけじゃなくて孫やその子孫にも同様に渡していけるので、$emit地獄にならずに済むので気に入って使っています。

親:子コンポーネントに渡したいobjectをv-modelする
子:"value"という名のpropsで受け取れるので、v-modelでオブジェクトの一部を更に孫に渡したり、フォーム要素にv-modelしたり、あるいは値を直に変更したりできます。変更は自動的に親に渡されます。

App.vue
<template>
  <div id="app">
    <h1>counter: {{ userData.counter }}</h1>
    <Child v-model="userData"/>
  </div>
</template>

<script>
import Child from "./components/Child";

export default {
  name: "App",
  components: { Child },
  data() {
    return {
      userData: { counter: 0 }
    }
  }
}
</script>
Child.vue
<template>
  <div id="counter">
    <p>
      <button @click="increment">increment</button>
    </p>
    <p>
      <input type="number" v-model.number="value.counter">
    </p>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: ["value"],
  methods: {
    increment() { this.value.counter++ }
  }
};
</script>

デモ: https://codesandbox.io/s/vue-template-df8oc

グローバルなfiltersは外部ファイルにまとめておく

filters.js
export default {
  toPercentage (n) { return (Math.round(n * 10000) / 100).toFixed(2) },
  toLocalString (n) { return n.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }
}
main.js
import filters from '@/filters'
Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })

重たいコンポーネントはLazyLoadしよう。

// 普通にコンポーネントを読み込む場合
import Hoge from '@/Hoge.vue'

// LazyLoadで呼ばれた時に読み込む場合
const Foo = () => import('@/Foo.vue')

その他にも、ロジックをjsファイルに切り出した場合も、WebpackでLazyLoadすると初期ロードを軽くできます。

import(/* webpackChunkName: "Hoge" */ '@/Hoge.js').then(module => {
  const Hoge = module.default
  Hoge.doSomething()
})

配列やオブジェクトのリアクティブな変更はスプレッド構文がシンプル

// $setを使う場合
this.$set(this.user, 'age', 36)

// スプレッド構文を使う場合
this.user = { ...user, age: 36 }

FontAwesomeを使う

参考: Font awesome を Vue.js で使ってみよう

vue-cli
$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/vue-fontawesome
@/plugins/fontawesome.js
import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)
main.js
import '@/plugins/fontawesome'

アイコンの使い方:

hoge.vue
<font-awesome-icon icon="file-download" />

SCSSの変数やmixinをvueファイル内でグローバルに使えるようにする

Vue2の場合:

vue.config.js
module.exports = {
  productionSourceMap: false,
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/scss/base/_variables.scss";
          @import "@/assets/scss/base/_media_queries.scss";
          @import "@/assets/scss/base/_mixins.scss";
        `
      }
    }
  }
}

Vue3の場合:

vue.config.js
module.exports = {
  productionSourceMap: false,
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @import "~@/assets/scss/base/_variables.scss";
          @import "~@/assets/scss/base/_media_queries.scss";
        `
      }
    }
  }
}
Why do not you register as a user and use Qiita more conveniently?
  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