How to direct include Vue.js <script> in Magento 2?

Question

I want to use Vue.js in Magento 2 by the Direct Include , but, for some reason, the script doesn't call the content and then, the local Vue script doesn't work.

I put the CDN in the header with the others

And is here in the page "loaded"

The HTML and Vue content works in codepen and others platforms

var gobantesCatalogos = new Vue({
  el: '#catalogs',
  data: {
    urlComun: '/pub/media/wysiwyg/catalogo/',
    items: [
      { titulo: 'File1', nombreArchivo: 'FileName1', nombreImagen: 'img1' },
      { titulo: 'File2', nombreArchivo: 'FileName2', nombreImagen: 'img2' },
      { titulo: 'File3', nombreArchivo: 'FileName3', nombreImagen: 'img3' },
      { titulo: 'File4', nombreArchivo: 'FileName4', nombreImagen: 'img4' },
      { titulo: 'File5', nombreArchivo: 'FileName5', nombreImagen: 'img5' },
      { titulo: 'File6', nombreArchivo: 'FileName6', nombreImagen: 'img6' }
    ]
  }
})

<h1>Catalogue</h1>
<div id="catalogs" class="columnss">
    <div class="column-lg-3 column-md-4 column-xs-6" v-for="(item, index) in items">
        <a v-bind:href="urlComun + item.nombreArchivo" class="catalogue" target="_blank" :style="{ backgroundImage: 'url(' + urlComun + item.nombreImagen + ')' }">
            <div class="fondo">
                <h2 class="titulo">{{ item.titulo }}</h2>
            </div>
        </a>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

But, doesn't work in the page. Anyone has tried to use Vue.js in Magento 2 without PWA Vue Storefront? What did I miss?

Thanks you for read it,

Answer 1

In magento you should avoid inject direct script in templates like

<script defer="" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Not like that

The correct way below

You can add path vue js to file requirejs-config.js

var config = {
    paths: {
       vue: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue',
       vuelocal: '<ModuleName>/js/vue',
       vueFallbacksDependency: [
         "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue",
         "secondFallbackSourceVueIncaseFirstOneFailLoad"
       ]
    }

    
}; 
/*No js extension after vue*/

Inside your template just call (you also can put js code below to seperate file instead include in phtml)

<script>
  require(["vue", "domReady!"], function (Vue) {
    return function (config, element) {
      var vueInstance = new Vue({el: element, data: {config}});
      return vueInstance;
    }
  });
</script>

You can add file requirejs-config.js inside you current theme default or luma (magento default)

the path will be

app/design/frontend/YourVendor/Yourtheme/requirejs-config.js

Last step in template file (phtml) here is markup code for render vue data

<div class="vue-init" data-mage-init='{"vue":{}}'>
   <h1>Test</h1>
</div>