Property or method “css” is not defined on the instance about vuetable-2 HOT 8 OPEN

@Tjab Please don't worry. Putting it as an issue is fine.

For your issue, I don't really have any solution as I've never seen that before and I mainly use webpack for my work. Not because I'm the expert in webpack, but because the vue-cli already does all the hard work on that.

I can only guess that it has something to do with the bundler configuration underneath elixir but I can't exactly pinpoint where.

For the first one that you have to put .vue extension in the import, I think there's something wrong with the config of vue-loader

For the second error, that's really new to me and I have no idea why. But if you could share your demo on GitHub, I'll be willing to take a look. However, the elixir stuff could also defeat me. :)

from vuetable-2.

@ratiw Hi! Thanks for the help! Sorry for the late reply, I was on a small holiday 😄

I will not be able to share the code with you, as I'm trying to get the whole thing working in our project (which I cannot share). I can give you more details about our setup, if you can tell me what to show (like the package.json)?

Our gulpfile.js:

var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

elixir(function (mix) {

    // Standard css stuff (scss)

    .webpack('app.js', null, null, {
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.js'
            }
        }
    });

    // Other standard stuff

});

from vuetable-2.

@Tjab I'm not familiar with Laravel Elixir, so it's hard for me to answer that. But recently, I've just create a sample project which uses Vuetable with Laravel 5.4 here. I'm not sure if that helps or not, but maybe you can check it out.

from vuetable-2.

You need babel-loader and then insert this to webpack.config.js Currently vue files are compiled using buble loader. Which expects module.exports = {} I needed a full day to find this.

module.exports = {
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    }
};

from vuetable-2.

@roosh-t3 Thanks for helping! I'm wondering though, I do not have a webpack.config.js in my project? Only a gulpfile.js.

from vuetable-2.

Create a new file in the root. Webpack will read the file.

from vuetable-2.

That does change the error from the buble-loader to babel-loader:

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/IntegrationList.vue
Module not found: Error: Can't resolve 'vuetable-2/src/components/Vuetable' in 'C:\Users\User\Code\project\resources\assets\js\components'
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/IntegrationList.vue 10:0-58
 @ ./resources/assets/js/components/IntegrationList.vue
 @ ./resources/assets/js/app.js

When I add .vue when importing vuetable-2/src/components/Vuetable, the error is expanded:

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vuetable-2/src/components/Vuetable.vue
Module build failed: Error: Couldn't find preset "stage-2" relative to directory "C:\\Users\\User\\Code\\project\\node_modules\\vuetable-2"

from vuetable-2.

@Tjab Sorry, I forgot to mention babel presets and I have been away. You have to install babel-loader, babel-preset-stage-2 : https://babeljs.io/docs/plugins/preset-stage-2/, you might be required to add another preset and a plugin, if that's not install yet. if errors pops in just google :)

see this issue here : vuejs/laravel-elixir-vue-2#5
and this two : JeffreyWay/laravel-elixir-vue#9

from vuetable-2.