CODEWITHSUNDEEP
javascriptvuejs2windowshopware
meez
meez

Reputation: 4769

'Vue' is not defined in my custom ShopWare 6 Javascript plugin

Vue.js is added in my head tag:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

I am building some custom Vue logic into my ShopWare 6 website (not with Vue storefront yet).

In my custom ShopWare 6 javascript plugin file vue-input-number/vue-input-number.plugin.js I have:

import Plugin from 'src/plugin-system/plugin.class';

export default class VueInputNumber extends Plugin {
    init() {

        window.Vue = Vue;

        const App = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
            },
            delimiters: ['[[',']]'],
        })
    }
}

When I compile this .js file ./psh.phar storefront:build I get an error:

error  'Vue' is not defined                      no-undef
error  'App' is assigned a value but never used  no-unused-vars
error  'Vue' is not defined                      no-undef

What do I have to do, so I can make new Vue instances in my Javascript files?

Upvotes: 0

Views: 939

Answers (1)

Tobbe
Tobbe

Reputation: 146

I think you are running into some ESLint errors there because Vue is unknown to the Shopware 6 webpack config in the Storefront. You can try to add Vue to the .eslintrc: 

// platform/src/Storefront/Resources/app/storefront/.eslintrc.js
module.exports = {
    // ...

    'globals': {
        'gtag': true,
        'Vue': true <-- Add Vue here
    },

    // ...
};

Or you can disable ESLint for the line which uses Vue:

// eslint-disable-next-line
const App = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    },
    delimiters: ['[[',']]'],
})

Upvotes: 1

Related Questions