はじめに

Vueでそこそこの規模のサイト作ろうとするとき、index.htmlにすべての処理を書き下すのではなく、コンポーネント別に.vueファイル、作りたいですよね。
Vue-CLIなら手順がいくらでもありますが、CDNの場合そんなに情報が見当たりません。
こちらはありますが、http-vue-loaderを用いているものはVue2限定です。

ということで、テンプレート化します。

結論

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>タイトル</title>
    
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
    
   </script>
</head>
<body>
    <div id="app"></div>

    <script>
        //vue3-sfc-loader初期設定
        const options = {
            moduleCache: {
                vue: Vue
            },

            //read subdirectory vue component file.
            async getFile(url) {
                
                const res = await fetch(url);
                if ( !res.ok )
                throw Object.assign(new Error(res.statusText + ' ' + url), { res });
                return {
                getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
                }
            },
            
            addStyle(textContent) {
        
                const style = Object.assign(document.createElement('style'), { textContent });
                const ref = document.head.getElementsByTagName('style')[0] || null;
                document.head.insertBefore(style, ref);
            },
        }
        const { loadModule } = window["vue3-sfc-loader"];
        
        //Appコンポーネントをマウント
        const app = Vue.createApp(
            Vue.defineAsyncComponent(
                () => loadModule("./src/components/App.vue", options)
            ),
        )
        app.mount('#app');
    </script>
</body>
</html>

慣習に倣って、rootのdivをAppコンポーネントにした例をご紹介していますが、マウントの処理は用途にあわせて編集して大丈夫です。

App.vue

<template>

</template>

<script>
    export default Vue.defineComponent({
        name: 'App',
        components: {
            "COMPONENT": Vue.defineAsyncComponent(() => loadModule("PATH.vue", options))
        },
    })
</script>

<style>
</style>

.vueファイルはCLIと同じように構成して大丈夫ですが、コンポーネントの読み込みはVue.defineAsyncComponent(() => loadModule("PATH.vue", options))を用いることだけ注意してください。

解説

vue3-sfc-loaderを使います。これにより、CDNでも.vueファイルを読み込むことができます。
しかし、初期設定がhttp-vue-loaderと比べてメンドウなので、index.htmlの初期設定のスクリプトはテンプレートと考えて大丈夫です。

i18nで多言語対応するにはこちらから