🤔

「既存サイトにちょいVue！CDNとSFCのスマート導入術」

2025/07/31に公開

「既存のHTMLにちょっとだけVue使いたい」
そう思うことはありませんか？
たとえば──

一部だけ共通化してコンポーネント化したい
でも ejs を入れるほどじゃない
それよりも @click や v-if でサクッとやりたい！
結構カンタンにできてしまいます。

最小構成の場合

HTMLにVueをCDNで読み込むだけで、v-if や @click がすぐ使えます。

<div id="app">
  <button @click="show = !show">切り替え</button>
  <p v-if="show">こんにちは Vue！</p>
</div>

<script>
  Vue.createApp({
    data() {
      return { show: true }
    }
  }).mount('#app')
</script>

これだけで、既存HTMLでもVueのリアクティブなUIに。

.vueファイルを使いたくなったとき

Vueの .vue コンポーネント形式で書きたくなったら、以下のような構成にすればOK：

index.html から #my-widget にマウント
main.js で Vue アプリを起動
MyWidget.vue にコンポーネントを定義

true/falseを外部から取ってきて文字を切り替え、などよくあると思うので、今回はそれをイメージとして、製作してます。

MyWidget.vue

// vueコンポーネント
<template>
  <div>
    <p>{{ isActive ? "trueです" : "falseです"}}</p>
    <button @click="isActive = !isActive">切り替え</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const isActive = ref(true)
</script>

main.js

import { createApp } from "vue";
import "./style.css";
import MyWidget from "./MyWidget.vue";

createApp(MyWidget).mount("#my-widget");

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ちょいVUE使う</title>
  </head>
  <body>
    <!-- <div id="app"></div> -->
    <h1>普通のHTMLに書いてます</h1>
    <div id="my-widget"></div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

vueコンポーネントを使って、最後#my-widgetにマウントして表示させています。

propsとemitも入れたやつでの実例
やっていることは同じで親で全部指定してます。

まとめ

サイトにnpm install vue または yarn add vueすればimportして使用できると思うので、もしうちは既存サイトだから大型の改修はな〜・・・などでvueに手を出せずにいるようでしたら、結構カンタンに導入できますので試してみてはいかがでしょうか？

最小構成の場合

.vueファイル を使いたくなったとき

まとめ

Discussion

.vueファイルを使いたくなったとき