Vue コンポーネントをクライアントサイドでテンプレートエンジンとして使う

Vue

forum.vuejs.org に回答したやつ。

コンポーネントを描画した結果の HTML 文字列を取得したいときってあるの？とか思われそうなんですが、たまにあるんですよね（ウィンドウポップアップでプレビューを静的なHTMLで表示する必要があったり、v-html で表示する内容の一部を差し替える必要があったり ）。

やりかたとしては、以下の手順です。

  1. コンポーネントを登録するオプションオブジェクトを Vue.extend に渡してサブコンストラクタを定義する
  2. サブコンストラクタのインスタンスを生成する(このとき、props は propsData プロパティ経由で指定する。データを変更したい場合はインスタンスのプロパティアクセスで変更する)
  3. $mount メソッドで描画する
  4. $el プロパティで DOM 要素が取得できるので、outerHTML プロパティにアクセスして、HTML 文字列を取得する
const Foo = Vue.extend({
  props: ['name'],
  template: `<p>Hello, {{name}}</p>`
});
const foo = new Foo({
    propsData: {
      name: 'Vue.js'
    }
});
foo.$mount();
const html = foo.$el.outerHTML;
console.log(html);

↑はコンパイラを含む Vue のビルドを使わないとエラーになります。ランタイムオンリービルドを使う場合は、.vue からインポートしたオブジェクトを Vue.extend に渡してください。