Import custom vue component in main.js file

Question

I have lots of Vue components. I want to set up routing for them from the main.js file. But I'm unable to import my component here as it is a javascript file. How can I import my Vue component(.vue) here?

import Vue from 'vue'
import App from './App.vue'

// Components importing
import LandingPage './components/LandingPage.vue'; // error occurs here

const routes = [
  { path: '/', component: LandingPage },
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

Kick Buttowski · Accepted Answer · 2023-04-20 17:38:41Z

2

Try to import like

import { LandingPage } './components/LandingPage.vue'

Or

make export default to LandingPage component.

edited Apr 20, 2023 at 17:38

Kick Buttowski

6,74713 gold badges39 silver badges61 bronze badges

answered Mar 23, 2021 at 6:11

Atul Bansode

2291 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import custom vue component in main.js file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related