How to integrate a dashboard template in Vuejs to a Laravel 5.7 project

Question

I have carefully followed CoreUI documentation guidelines for the topic's integration in vuejs development, this topic is designed with specific components for the integration in a vuejs environment. Said documentation specifies this commands for the installing, which I executed:

 git clone https://github.com/coreui/free-bootstrap-admin-template.git my-project $ cd my-project $ npm install. 

Once executed, I copied the files from the folder /src into /resources of laravel projects, I also added:

 mix.js('resources/js/app.js', 'public/js') .js('resources/js/bootstrap.js', 'public/js') /*This is the mainjs on template /src*/ .js('resources/js/main.js', 'public/js') /*This line is added*/ .sass('resources/sass/app.scss', 'public/css'); mix.browserSync({ proxy: 'http://localhost:8000' }); 

For the webpack to compile files' code /main.js which executes templates dependency

after executing “npm run watch” it generates the following error:

 ERROR in ./resources/js/router/index.js Module build failed: SyntaxError: Unexpected token (68:31) 66 | 67 | // Views > 68 | const Dashboard = () => import('@/views/Dashboard') | ^ 69 | 70 | const Colors = () => import('@/views/theme/Colors') 71 | const Typography = () => import('@/views/theme/Typography') 

after codifying the lines which contained

const Dashboard        = () => import('@/views/Dashboard')

and replace them with

import Dashboard        from 'resources/js/views/Dashboard.vue'

it generates another error:

 ERROR in ./resources/js/router/index.js Module build failed: SyntaxError: Unexpected token (64:31) 62 | 63 | Containers > 64 | const DefaultContainer = () => import('resources/js/views/Dashboard.vue') | ^ 65 | 66 | 67 | // // Views 

fiding documentation regarding vuejs templates implementation in laravel projects is very limited, which makes the implementation of this templates difficult. It would be very helpful if you comment suggestions o solutions regarding this.

Answer 1

You should try this:

const Dashboard = () => System.import('@/views/Dashboard');

For some reason I've never gotten import to work without System in laravel based Vue project. This has fixed the problem for me. Also you could set:

const import = System.import();

At the top of your router so you won't have to modify all your imports.