Module js import/export issue (vue.js)

Question

I'm trying to teach SPA in Laravel + Vue.

I have a few pretty simpe components.

<template>
    <p>Home</p>
</template>

<script>
    export default {
        name: 'Home'
    }
</script>

Also, I have a router file

import Home from '../pages/home.vue';
import Profile from '../pages/profile.vue';


export let routes = [
    {
        path : '/home',
        component : Home
    },
    {
        path : '/profile',
        component : Profile
    }
];

npm run dev - "build successfull"

I've attached router-link tags and placed router-view. But there is just . It's gives the same result with "out of the box" Laravel example-component.vue .

It seems there is somethng wrong with import settings in my component, but what?

Answer 1

The problem was in the project structure. I have a router/routes.js and app.js file

In app.js I import routes from routes.js and do new VueRouter.

The error was:

import {routes} from './router/routes';
let router = new VueRouter(routes);

Should be

import {routes} from './router/routes';
let router = new VueRouter({routes});