Compile .vue files with Slate

[nemoeric]

I would love to be able to use Slate to build a theme using Vue.js, graphql and Shopify storefront api ! But it seems Slate can't compile .vue files yet. I get the following error.

Also tried to implement vue loader https://github.com/vuejs/vue-loader in slate config But i was unsuccessful.

I saw topics mentioning this but I am opening one to put the focus on vue. Or if anyone has feedbacks.

Thanks

[jaydensmith]

I have Vue working by adding the following to my slate.config.js file

module.exports = {
    'cssVarLoader.liquidPath': ['src/snippets/css-variables.liquid'],

    'webpack.extend': merge([
        {
            resolve: {
                alias: {
                    'vue$': 'vue/dist/vue.esm.js'
                    jquery: path.resolve('./node_modules/jquery'),
                    'lodash-es': path.resolve('./node_modules/lodash-es'),
                },
                extensions: ['*', '.js', '.vue', '.json']
            },
        },
        {
            module: {
                rules: [
                    {
                        test: /\.vue$/,
                        loader: 'vue-loader'
                    }
                ]
            },
            plugins: [
                // make sure to include the plugin!
                new VueLoaderPlugin()
            ]
        }
    ]),
}

[nemoeric]

awesome !

Just had to yarn add webpack-merge vue-template-compiler then explicitely add those into package.json

now it works ! Thanks @jaydensmith

[t-kelly]

Just had to yarn add webpack-merge

We are already using webpack-merge to merge in the value passed via webpack.extend. Just pass the above code as a single object and it will work the same.

[liron-navon]

It breaks since the vue loader must come before babel and hmr, please allow an option to use webpack extend instead of webpack, maybe give an option to overwrite the webpack file, and expose a function to get the default configurations? it will be much more convinient to use.

./vue/App.vue?vue&type=script&lang=js& (../node_modules/@shopify/slate-tools/tools/webpack/hmr-alamo-loader.js!../node_modules/babel-loader/lib??ref--5!../node_modules/vue-loader/lib??vue-loader-options!./vue/App.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './core/app-data' in '/Users/lna23126/shopify-learning/my-first-theme/src/vue'
 @ ./vue/App.vue?vue&type=script&lang=js& (../node_modules/@shopify/slate-tools/tools/webpack/hmr-alamo-loader.js!../node_modules/babel-loader/lib??ref--5!../node_modules/vue-loader/lib??vue-loader-options!./vue/App.vue?vue&type=script&lang=js&) 19:15-41
 @ ./vue/App.vue?vue&type=script&lang=js&
 @ ./vue/App.vue
 @ ./vue/index.js
 @ multi ./vue/index.js