ワイズリマインダー

Vue3をインストールせずにSFC内で文字列を表示してみた【CompositionAPI編】

2022.12.01

デモ表示はこちら

次の条件のもと作成されています。
・Vue3その他もろもろはインストールしたくない。
・CDNからダウンロードした各種jsを同ドメイン内にアップロードしている。
・CompositionAPIを使用。

 

index.html

 <div id="app">
  <compo-string></compo-string>
 </div>

 

index.js

const { loadModule } = window['vue3-sfc-loader'];
Vue.createApp({
  setup( ){
  },
  components: {
    'compo-string': Vue.defineAsyncComponent( () => loadModule('compo_string.vue', vue3['loaderOption']() ) )
  }
}).mount('#app');

 

compo_string.vue

<template>
 <h2> This is compo-string. </h2>
 <h3>{{ h3String }}</h3>
</template>

<script scoped>
export default{
  setup(){
    const h3String = "This is compo-string variable.";
    return { h3String };
  }
}
</script>

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。