[Vuejs]-Error while importing component in vuejs

by

0👍

If you want to import a component into another module/component then use this at the top of your file:

import MyComponent from '@/layouts/default.vue'

…assuming you have exported MyComponent as the default export in your default.vue file.

You can change MyComponent to whatever you want.

0👍

I’m assuming you’re using stand alone components. In that case, include export default in your default.vue file and then import DefaultComponent from '@/layouts/default.vue at the top of the file. Then, include the DefaultComponent in the Components section.

Default.vue

<template>
  <p>{{hi}}</p>
</template>
<script>
  export default{
    data: function(){
      hi: 'Hello World'
    }
  }
</script>
<style
</style>

Main.vue

<template>
  <default-component></default-component>
</template>
<script>
  import DefaultComponent from '@layouts/default.vue';

  export default{
    components: {
      'default-component': DefaultComponent
    }
  }
</script>
<style
</style>

Leave a comment