Vue.js アプリケーションにおけるエントリーポイントの書き方メモ #JavaScript

はじめに

これは備忘録です。
Vue.js アプリケーションを書いていく時にエントリーポイントの書き方がいくつかあるなぁと思ったので、これまで自分がやったパターン（といっても片手で数えられるくらい）をメモします。

触れない話

Nuxt.js

書き方達

単純な Vue.js アプリケーションの時

CSSセレクタで対象を指定して Vue インスタンスをマウントします。
初期化時の引数に el プロパティを指定するか、 el を指定せずに作成したインスタンスに対して $mount() を実行します。

参照:
el: https://jp.vuejs.org/v2/api/#el
$mount(): https://jp.vuejs.org/v2/api/#vm-mount

<div id="app">
  <App/>
</div>

import Vue from 'vue'
import App from './components/App.vue'

// パターン1
new Vue({
  el: '#app',
  components: {
    App
  }
})

// パターン2
new Vue({
  components: {
    App
  }
}).$mount('#app')

マウント先をコンポーネントで置き換える形

render() メソッドを使うことで、マウント先を指定のコンポーネントで置き換えるように描画できます。
以下の例では、Vueインスタンスのマウント後は div#app が span.foobar に置き換わります。

属性の id="app" は div ごと消えるので、このままでは再利用できません。 #app のセレクタを再利用した場合は createElement() の引数を確認するか、1つ後の書き方を参照してください。

参照:
render(): https://jp.vuejs.org/v2/api/#render
createElement(): https://jp.vuejs.org/v2/guide/render-function.html#createElement-%E5%BC%95%E6%95%B0

<div id="app"></div>

components/App.vue

<template>
  <span class="foobar">
    foobar
  </span>
</template>

<script>
export default {
  name: 'App'
}
</script>

import Vue from 'vue'
import App from './components/App.vue'

new Vue({
  render(h){
    return h(App)
  }
}).$mount('#app')

h() というのは createElement() の事で、「 html （のような物）を生成するメソッド」に対してエイリアス的によく付けられる名前のようです。多分。
（参考: What does `h` mean? · Issue #6 · vuejs/babel-plugin-transform-vue-jsx）

VueRouter を使いつつ root 要素にコンポーネントを描画したい。

上とやる事は同じで render() を使います。
SPAを作る際にページ単位を担当するコンポーネントを、 body 直下などの root 要素として配置したい場合などが該当します。

ただ、今回は全ページコンポーネントに対し id="app" を動的に付与したい場合の対応も行います。
こうすることで画面内に常に #app というセレクタが存在することになるので、例えば link タグ等で読み込んでいる CSS 内で #app に対するスタイルが記述されていても、問題なく反映されます。

<div id="app"></div>

import Vue from 'vue'
import VueRouter from 'vue-router'

import PageRoot from './components/PageRoot.vue'
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'

const routes = [
  {
    path: '/',
    name: 'PageRoot',
    component: PageRoot
  },
  {
    path: '/page1',
    name: 'Page1',
    component: Page1
  },
  {
    path: '/page2',
    name: 'Page2',
    component: Page2
  },
]

const routerOption = {
  routes
}

Vue.use(VueRouter)

new Vue({
  router: new VueRouter(routerOption),
  render(h){
    return h('router-view', {
      attrs: {
        // router-view で描画されるコンポーネント全てに、常に `id="app"` を持たせたい場合に記述します。
        id: '#app'
      }
    })
  }
}).$mount('#app')

肝は createElement() で router-view コンポーネントを描画させている部分です。