CODEWITHSUNDEEP
vuejs2
Brian Moreno
Brian Moreno

Reputation: 109

Require in VueJS

so I'm having a bit of a problem with this. I have a navigation on my page. The problem is when I create a new page I have to rewrite my whole navigation. If something changes, I have to make that change in all of my pages.

I want to see if there is a way to "require" my navigation in all of my templates. In PHP I could use require "navigation.html"; and it would load my navigation on the page, is their a similar function as this in VueJS?

Upvotes: 4

Views: 2437

Answers (2)

samayo
samayo

Reputation: 16495

In Vuejs componens can be defined as local or global depending on where you want to use your components.

For example:

This is our component:

Vue.component('hello', {template: `<p> Hello </p>`});

and this is our Vue instance:

new Vue({
  el: '#app'
})

and doing this:

<div id="#app">
  <hello />
</div>

Would show hello component, anywhere inside your div#app because we have created a global compoent:

If you want to show your component for specific component, then pass the component name as:

<template>
 <div>
  <hello />
 </div>
</template>

<script>
var hello = {
  template: `<p> Hello </p>`
}
export default {
  components: {
    'hello': hello
  }
}

In the second example you will have a hello component only avaiable to the component you register it into

Upvotes: 1

Skeith
Skeith

Reputation: 93

You only need to import your component to another component/main JS.

Another component

<template>
    <yourcomponent/>
</template>

<script>
import yourComponent from './yourpath';
export default {
    name: 'component',
    components: {
       'yourcomponent': yourComponent
    }
}
</script>

Main JS

import yourComponent from './yourpath';
new Vue({
    el: '#root',
    components: {
       'yourcomponent': yourComponent
    }
});

Upvotes: 0

Related Questions