Symfony 4 + Webpack encore - Vue is not defined

Question

I'm using Symfony 4 with Webpack Encore, (which is supposed to be the new Assetic (cf SensioLab) ).

But I have an issue :/ On each page, I link two scripts app.js and app.css which are compiled by Webpack and contain all my libraries from this js code :

// CSS
// Libraries
require('font-awesome/css/font-awesome.css')
require('bootstrap/dist/css/bootstrap.css')

require('@css/elements/_nav.scss')
require('@css/app.scss')
require('@css/elements/_box.scss')

// JS
require('jquery')
require('vue')
require('axios')
require('bootstrap')

Moreover, I have some page which have personal js and css file. (in addition of app.js and app.css), which contain the configuration of the page. These files are also compiled by webpack, from a .vue file. For example, my index.vue file is :

<script>
  import UpPage from '@components/up-page/page.vue'

  new Vue({
    el: "#media-container",
    delimiters: ["<%", "%>"],
    data: {
      media: [],
      nbMediaPerSearch: 20,
      canShowMedia: false
    },
    methods: {
      getMedia: function (nb) {
        let that = this;
        axios.get(Routing.generate("api_rest_page_get_page_media", {
          count: nb
        })).then(function (result) {
          let data = result.data;

          // Add media to media list
          if (data.length > 0)
            data.forEach(function (elt) {
              that.media.push(elt);
            });

          that.canShowMedia = that.media.length !== 0;
        }).catch(function (error) {
          console.error(error);
        })
      },
      openInNewTab: function (url) {
        let win = window.open(url, '_blank');
        win.focus();
      }
    },
    beforeMount() {
      this.getMedia(this.nbMediaPerSearch);
    }
  })
</script>

Eventualy, My Twig file use the index.js file provided to list all the media in the #media-container (with a v-for loop on a div)

But, when I try to see my page, I have this error :

Uncaught ReferenceError: Vue is not defined at Object../node_modules/babel-loader/lib/index.js?{"cacheDirectory":true}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./assets/vue/pages/user/my-page/index.vue (index.vue:16)

I have tried something like this in my app.js :

let $ = require('jquery')
let Vue = require('vue')
let axios = require('axios')
let bootstrap = require('bootstrap')

But same issue :/ I have no idea of what is causing this issue, I am a beginner with webpack and webpack encore :/

user320487 · Accepted Answer · 2018-01-26 05:05:24Z

3

You need to import Vue in index.vue. Add this at the top of the script import Vue from 'vue'

answered Jan 26, 2018 at 5:05

user320487

Sign up to request clarification or add additional context in comments.

2 Comments

graille Over a year ago

Yeah I suppose it will work, but if I have an app.js which links all my libraries, it's to don't have to import them in all my .vue files, in all my pages. If I do this, my js files will be big and the browser cache will not works properly :/. And what I will do when I would use VueJs directly in my .html.twig file ? I could not :/

user320487 Over a year ago

Configured correctly, webpack can split vendor libraries into common chunks, meaning your size won't grow out of control. Not sure where the issue you're hinting at with browser cache would come into play. And how exactly would you use VueJs directly in a a .html/.twig file? Vue is a framework, not a language. Importing libraries in components is what you gotta do.

Collectives™ on Stack Overflow

Symfony 4 + Webpack encore - Vue is not defined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related