2

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/[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,

1 Answer 1

2

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>
4
  • 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.
    – alex-chama
    Feb 5, 2020 at 16:01
  • because js combine mechanism in magento use requirejs way. Js resource path define in requirejs-config
    – mrtuvn
    Feb 5, 2020 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, 2020 at 16:09
  • I understand now, thanks you very much, now works :))))
    – alex-chama
    Feb 5, 2020 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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