Как я могу использовать пользовательскую сборку веб-компонента с Vue на сайте Wordpress?

Question

На обычной php веб-странице я бы включил Vue. js через cdn и мой компонент следующим образом:

   <!--Load Vue-->
   <script src="https://unpkg.com/vue"></script>
   <!--Load the web component polyfill-->
   <script 
     src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>  

   <script src="./my-custom-element.js"></script>
   <!--Use my custom element-->
   <my-custom-element msg="Hello..."></my-custom-element>

Возможно ли это как-то на сайте Wordpress?

Answer 1

Вам просто нужно предоставить элемент div с идентификатором для Vue, чтобы использовать:

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
</div>

<script>
Vue.component('MyButton',{
template:'<button><slot></slot></button>'
})

new Vue({
  el: '#app',
  data : ()=>({
   items : ['a','b','c'],
 }),
  template: `<div>
  <my-button v-for="i in items" :key="i">{{i}}</my-button>
  </div>`
})
</script>

https://jsfiddle.net/ellisdod/2yn7metj/