1

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.

ReferenceError: Vue is not defined

I put the CDN in the header with the others Scripts and stylesheets in Content > Configuration > Edit Theme > HTML Head

And is here in the page "loaded" Ricght click in the page > Code font page

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/vue@2.5.16/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,

1

In magento you should avoid inject direct script in templates like

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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/vue@2.5.16/dist/vue',
    }
}; 
/*No js extension after vue*/

Inside your template just call

<script>
  require(["vue", "domReady!"], function(Vue){
    var vueInstance = new Vue({el: '#your-element-id',data: {}});
  });
</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

|improve this answer|||||
  • Oh and why we should avoid that? There is security or performance reasons? Thanks you so much for the answer, I'm going to try this way and I tell you what happens. – v-alex Feb 5 at 16:01
  • because js combine mechanism in magento use requirejs way. Js resource path define in requirejs-config – mrtuvn Feb 5 at 16:05
  • because your vue file put to head tag of html so when template parse and recall new Vue! At this moment vue js file still not load yet Requirejs make sure load js after all html paint and render success – mrtuvn Feb 5 at 16:09
  • I understand now, thanks you very much, now works :)))) – v-alex Feb 5 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.