CODEWITHSUNDEEP
javascriptvue.jsvue-component
Dan Jones
Dan Jones

Reputation: 25

Trying to export and import a vue component into another component which isnt the App.vue

First of all -

I have created a Hamburger.vue in the components directory, secondly I wanted to import this hamburger into my Header.vue file so I dont have to repeat the code.

I will attach a playground code with the code.

https://codesandbox.io/s/vue-tailwind-playground-forked-0016sh?file=/src/App.vue

I have no idea what it is, as I've checked multiple times its the right file path or am I just doing this incorrectly?

I was hoping for the Hamburger menu to appear in the navigation bar, without having to stick every single component in the App.vue file (as this is the only way I can get things to work using export default {} ).

Any help would be greatly appreciated, thanks!

Upvotes: 1

Views: 274

Answers (1)

yoduh
yoduh

Reputation: 14649

If using the Options API, components have to be registered in the same component you import them into. See the documentation

Header.vue

import Hamburger from "@/components/Hamburger.vue";

export default {
  components: {
    Hamburger,
  },
}

The self-registration should also be removed from the Hamburger.vue component

updated sandbox

Upvotes: 3

Related Questions