petite-vueとは？

petite-vue
Vueと同じテンプレート構文が使用できる
サーバーフレームワークによってレンダリングされた既存のHTMLページに少量のインタラクションを「振りかける」ために最適化されているらしい

とりえあず動かしてみる

petite-vueで操作するには、操作したいタグにv-scopeを付与する
v-scopeには操作する変数や関数をオブジェクトで指定する

スクリプトを分離してみる

  <div v-scope>
    {{count}}
    <button @click="increment">inc</button>
  </div>
  <script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'

    createApp({
      count: 0,
      increment() {
        this.count++;
      }
    }).mount()
  </script>

createAppにpetite-vueから操作する変数や関数をオブジェクトで渡す
mount()した値はルートスコープに指定され、v-scopeで指定しなくても関数や変数を使用できる

ファイルを分割してみる

今回はwebpackからpetite-vueを使ってみる。
webpackの設定については省略。

$ npm i petite-vue

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>hoge</title>
</head>
<body>
  <div v-scope>
    {{count}}
    <button @click="increment">inc</button>
  </div>
  <script src="main.js"></script>
</body>
</html>

main.js

import { createApp } from 'petite-vue'

createApp({
  count: 0,
  increment() {
    this.count++;
  }
}).mount()

railsで使ってみる

今回はwebpackerを使用するものとする。

petite-vueを追加する

$ npm i petite-vue

app/javascript/packs/count.js

import {createApp} from 'petite-vue';

createApp({
  count: 0,
  increment() {
    this.count++;
  }
}).mount();

app/views/counts/index.html.erb

<div v-scope>
  {{count}}
  <button @click="increment">inc</button>

  <%= javascript_pack_tag 'count' %>
</div>