CODEWITHSUNDEEP
vue.jsvuejs2
Juned Ansari
Juned Ansari

Reputation: 5283

Header and footer component in Vue.js

I am learning Vue.js, I am not using cli for Vue.js installation, I just downloaded Vue.js file and trying to learn it.

My issue is to externalize components like header.vue and footer.vue and add them to main component.

I used Vue.component('MyHeader', require('./components/Header.vue')); to load component but I was getting error like "Uncaught ReferenceError: require is not defined".

To resolve this error I downloaded require.js file from here but I am still unable to load component files.

Folder Structure

enter image description here

index.html

<!DOCTYPE html>
<html>
<head>
    <title>this is example of header and footer</title>
</head>
<body>

<div id='root'>
   <testcomponent></testcomponent>
   <MyHeader></MyHeader>
   <div>I am Content</div>
   <MyFooter></MyFooter>
</div>


<!-- we need this two files for vue js -->
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="require.js"></script>
<!-- End of we need this two files for vue js -->
<script type="text/javascript" src="indexController.js"></script>
</body>
</html>

indexController.js

//rout file for vue js

Vue.component("testcomponent",{
    template:'<p>I am Test Component</p>'
});

Vue.component('MyHeader', require('./components/Header.vue'));
Vue.component('MyFooter', require('./components/Footer.vue'));

//import MyHeader from './components/Header.vue'
//import MyFooter from './components/Footer.vue'

var app = new Vue({
    el: "#root",
    components: {
        MyHeader,
        MyFooter
    },
    data: {
        
    },
    methods:{

    }

});

Header.vue

<template>
    <h1>I am Header</h1>
</template>

Footer.vue

<template>
    <h1>I am Footer</h1>
</template>

Upvotes: 4

Views: 51170

Answers (4)

Martin Calvert
Martin Calvert

Reputation: 1715

If you are just starting with Vue and all the JS magic I would look into the vue cli install approach link. It should install webpack and all the things needed for single page components then you can work backward to deconstruct the pieces of that setup.

You can also look at the examples in the vue GitHub repos. link

That example is using vuex along with single file components but it is solid.

Upvotes: 1

connexo
connexo

Reputation: 56753

CommonJS using require (not to be confused with require.js which is using AMD):

Instead of Header.vue create Header.js which you then can require just like you do:

module.exports = { 
  template: `<template>
      <h1>I am Header</h1>
    </template>` 
}

ES6 export / import

If you want to use ES6 import instead of require, this would be the content of Header.js:

export default { 
  template: `<template>
      <h1>I am Header</h1>
    </template>` 
}

To work with .vue component files and structuring, you need vue-webpack-loader and a build stack involving something like webpack or browserify.

See

https://v2.vuejs.org/v2/guide/single-file-components.html#For-Users-New-to-Module-Build-Systems-in-JavaScript

Upvotes: 1

Dencio
Dencio

Reputation: 518

Single file component (.vue)

You need vue-loader to convert .vue files to normal js format. If you will read the documentation at https://v2.vuejs.org/v2/guide/single-file-components.html, you basically need to use webpack or browserify to use .vue files extensions.

Upvotes: 4

bbsimonbb
bbsimonbb

Reputation: 29002

As it says in the comments, you need a build tool to use .vue files. But you can get all the goodness of components, except scoped css, by using plain .js files.

Put your templates in .js template strings, then call your components the old way, with <script src="urlOfFile.js">, or call them with requirejs, but they need to be plain .js files, not .vue.

Upvotes: 1

Related Questions