Vue.js 3をWordPress 上で動かしてみた。

萩原賢二のコーディングストック > プログラミング > Vue.js 3をWordPress 上で動かしてみた。

2021.03.11

Vue.js 3をWordPress 上で動かしてみた。

Vue.jsはオープンソースのフレームワークです。
現在「Vue3」と呼ばれる Ver.3がリリースされています。　Vue.jsの最新バージョンですね。
このVue3を　WordPressで動かしてみようというのが今回の目的です。
といっても簡単で単純に Vue3のライブラリーをCDNのリンクを貼っているだけです。

今回は、取り敢えずの動作確認ということで最低限の実装で動作確認をしてみました。
内容は単純に setIntervalで現在時間を取得して表示するデジタル時計です。
時間の表示には　Google Font 「Black Ops One」を　Webフォントで表示しています。

Vue3ライブラリの実装

viu.js 3 と　sprintf のライブラリを　CDNから読み込みます。　funcions.php に記述します。
参考サイト
https://v3.ja.vuejs.org/
https://cdnjs.com/libraries/sprintf

// viu.js 3 と　sprintf のライブラリを　C DNから読み込み
function add_cdns){
	wp_enqueue_script('vue','https://unpkg.com/vue@next');
	wp_enqueue_script('sprintf','https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js');
}
add_action( 'wp_enqueue_scripts', 'add_cdns' );

// viu.js 3 と　sprintf のライブラリを　C DNから読み込み

function add_cdns){

wp_enqueue_script('vue','https://unpkg.com/vue@next');

wp_enqueue_script('sprintf','https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js');

}

add_action( 'wp_enqueue_scripts', 'add_cdns' );

HTMLソース

<div id="app" class="vueWrapper">
    <p id="vueTime">{{ message }}</p>
</div>

<p id="vueTime">{{ message }}</p>

</div>

Mustache構文により vue.js で　データを置き換えます。

// テンプレート(HTMLのpタグ内）
{{ message }}

// 渡す値(javascriptの実行による)
{
message: ‘Hello Vue!’
}
このjavascriptの実行により {{ message }}がHello Vue!に書き換えられる。

vue3(javascript)ソース

// vue3 のコード実装
const appdata = {
    data() {
      return {
        message: 'Hello Vue!',
        count: 0
      }
    },
    mounted() {  // mounted関数は　Vue3オブジェクトが setInterval の実行をの実現する
      setInterval(() => {
      　　let nowTime = new Date();
　　      let nowHour = sprintf( "%02d",nowTime.getHours() );
   　　   let nowMin  = sprintf( "%02d",nowTime.getMinutes() );
     　　 let nowSec  = sprintf( "%02d",nowTime.getSeconds() );
      　　this.message =  nowHour + ":" + nowMin + ":" + nowSec ;
      }, 1000)  // 1000ミリ秒（１秒）ごとに時間を取得
    }
  }

  Vue.createApp(appdata).mount('#app')

// vue3 のコード実装

const appdata = {

data() {

return {

message: 'Hello Vue!',

}

mounted() { // mounted関数は　Vue3オブジェクトが setInterval の実行をの実現する

setInterval(() => {

　　let nowTime = new Date();

　　 let nowHour = sprintf( "%02d",nowTime.getHours() );

　　 let nowMin = sprintf( "%02d",nowTime.getMinutes() );

　　 let nowSec = sprintf( "%02d",nowTime.getSeconds() );

　　this.message = nowHour + ":" + nowMin + ":" + nowSec ;

}, 1000) // 1000ミリ秒（１秒）ごとに時間を取得

}

Vue.createApp(appdata).mount('#app')

css

実際の時間は googleWebフォントでフォントのデザインしています。
PC画面では背景に画像を用いて見かけを装飾しています
また、メディアクレリーによりスマフォ等の幅の狭いブラウザの場合は背景をなくしています。

// Google Webフォントの実装
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">

// Google Webフォントの実装

// css
.vueWrapper {
  position: relative;
  width: 690px;
  height: 393px;  
  background-image: url(https://xxxx.yyyy.zzzz/gakubuchi.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#vueTime{
  font-family: 'Black Ops One', cursive; 
  font-size:40px;
  color: #000;
  position: absolute;
  top: 150px;
  left: 260px;
}
@media (max-width: 800px) {
  .vueWrapper{
    background-image: none;
    background-color: #F0F0F0;
    width: 100%;
    height:100px;;
  }
  #vueTime{
    top: 10px;
    left: 100px;

  }
}

// css

.vueWrapper {

position: relative;

width: 690px;

height: 393px;

background-size: contain;

background-repeat: no-repeat;

}

#vueTime{

font-family: 'Black Ops One', cursive;

font-size:40px;

color: #000;

position: absolute;

top: 150px;

left: 260px;

}

@media (max-width: 800px) {

.vueWrapper{

background-color: #F0F0F0;

width: 100%;

height:100px;;

}

#vueTime{

top: 10px;

left: 100px;

}

投稿者: khagiwara
プログラミング

ubuntu20.04 nginx に wordpress5.6 をインストール

Webサイトデザイン、プログラミング、サーバー構築運用の記録

Vue.js 3をWordPress 上で動かしてみた。

Vue3ライブラリの実装

HTMLソース

vue3(javascript)ソース

css

最近の記事