Level 4
Look closer at the error output :)
You need to install the scss-loader module.
Jan 20, 2017
7
Level 4
Is it possible to include Vue Admin (Bulma) into Laravel?
Hi everybody, I am pretty new to Vue.js and Js in general. I am using the Bulma.io CSS Framework and found the Vue-Admin Package which provides Vue Components in Bulma Styles.
I would like to use it but I am not sure how to require it. I tried to require a single Component like:
// resource/assets/js/app.js
Vue.component('sidebar', require('../../../node_modules/vue-admin/client/components/layout/Sidebar.vue'));
This throws the following Error in my Console:
ERROR in ./~/vue-admin/client/components/layout/Sidebar.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-admin/client/components/layout'
@ ./~/vue-admin/client/components/layout/Sidebar.vue 5:0-169
@ ./resources/assets/js/app.js
ERROR in ./~/vue-bulma-expanding/src/Expanding.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-bulma-expanding/src'
@ ./~/vue-bulma-expanding/src/Expanding.vue 5:0-183
@ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-admin/client/components/layout/Sidebar.vue
@ ./~/vue-admin/client/components/layout/Sidebar.vue
@ ./resources/assets/js/app.js
I also tried to include some kind of an Autoloader and tried the following:
// resource/assets/js/app.js
require('../../../node_modules/vue-admin/client/app');
This throwed the following:
ERROR in ./~/vue-admin/client/app.js
Module parse failed: /Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/node_modules/vue-admin/client/app.js Unexpected token (38:2)
You may need an appropriate loader to handle this file type.
| store,
| nprogress,
| ...App
| })
|
@ ./resources/assets/js/app.js 9:0-53
This is the link to the Vue-Admin Package on GIthub:
https://github.com/vue-bulma/vue-admin
I hope you guys can help me?
Thanks David
Level 4
Thanks for the answer, but it doesn't really help. I did a
npm install scss-loader --save
and added a
require('scss-loader');
The Output is another Error:
ERROR in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'scss-loader' in '/Volumes/Data/Entwicklung/Workspace/Private/TheNewSumoAndPanda/resources/assets/js'
@ ./resources/assets/js/bootstrap.js 12:0-22
@ ./resources/assets/js/app.js
There is only a package.json under node_modules/scss-loader. This seems not correct.
Any tipps here?
Level 1
I created a solution without laravel-mix: https://github.com/gazben/laravel-vue-admin
Level 4
That looks pretty nice. I will check that out as soon as I am come back to my side project!
Level 6
I'm dealing with a similar problem. I've got an existing app and I'm looking to change the front end dashboard. However, I'm running into the following problem:
ERROR Failed to compile with 4 errors 12:30:20 AM
error in ./~/vue-bulma-jump/src/index.js
Module parse failed: /Users/humblecoder/code/laravelprojects/dashboardapp/node_modules/vue-bulma-jump/src/index.js Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export BackToTop from './BackToTop'
| export default from './Jump'
|
@ ./~/babel-loader/lib?cacheDirectory!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/vue-admin/client/views/components/BackToTop.vue 50:0-43
@ ./resources/vue-admin/client/views/components/BackToTop.vue
@ ./resources/vue-admin/client/views lazy ^\.\/.*\.vue$
@ ./resources/vue-admin/client/store/modules/menu/lazyLoading.js
@ ./resources/vue-admin/client/store/modules/menu/index.js
@ ./resources/vue-admin/client/store/index.js
@ ./resources/vue-admin/client/vue-bulma.app.js
@ multi ./resources/vue-admin/client/vue-bulma.app.js
As you can see, I'm having an issue with compilation of one of the required modules. I copied the "package.json" and ".babelrc" requirements to the root directory for use with Laravel Mix. Admittedly I'm not terribly versed in webpack and babel, but I felt I installed all required plugins/presets/etc. Clearly that's not the case. I'm sure it's something simple, but any help would be appreciated.
Level 4
I already switched to a Theme that handles everything for me. I decided that the whole npm stuff is too overwhelming at the moment for me and I stick with the "Old" dull stuff as long things are working as they are supposed to xD. Can't help you with that. Hopefully, someone can solve it.
Level 19
I built from scratch something similar, you can find it at https://github.com/laravel-enso/enso. It's packed with a lot of (hopefully) usefull stuff.
Please or to participate in this conversation.