Vuejs template inheritance
How can I use template inheritance (Like what jade has, extends file.jade and then the blocks with the same name would be overwritten)?
I know that I can do everything with composition, but for components like footer and header which appear on every single page except one or two (e.g.login page) I must write them on every single component. In my app I have a two level navigation and it seems painful to repeat them on every one of those child components :(
I know that I can use jade and then inherit a jade file within my components, but it seems wrong because I would have some jade and some Vue files, is there any other way to do this?
// Component.vue
<template lang="jade">
extends ./StandardLayout
block content
router-view
</template>
// StandardLayout.Vue
<template lang="jade">
div
navbar
div.container
div.spacer
div.row
block content
<template>
What I've settled for, is a layouts folder filled with jade layouts and I use them to extend my components. I used vue-cli with webpack template.
javascript templates vue.js
edited Jul 12 '16 at 13:12
Hashem Qolami
72k20107127
asked Jul 12 '16 at 12:21
Mohibeyki
164213
add a comment |
How can I use template inheritance (Like what jade has, extends file.jade and then the blocks with the same name would be overwritten)?
I know that I can do everything with composition, but for components like footer and header which appear on every single page except one or two (e.g.login page) I must write them on every single component. In my app I have a two level navigation and it seems painful to repeat them on every one of those child components :(
I know that I can use jade and then inherit a jade file within my components, but it seems wrong because I would have some jade and some Vue files, is there any other way to do this?
// Component.vue
<template lang="jade">
extends ./StandardLayout
block content
router-view
</template>
// StandardLayout.Vue
<template lang="jade">
div
navbar
div.container
div.spacer
div.row
block content
<template>
What I've settled for, is a layouts folder filled with jade layouts and I use them to extend my components. I used vue-cli with webpack template.
javascript templates vue.js
edited Jul 12 '16 at 13:12
Hashem Qolami
72k20107127
asked Jul 12 '16 at 12:21
Mohibeyki
164213
Maybe I'm missing something but if you are using arouter-viewyou should just be dynamically changing out that one element with new page content. So, you only need the layout code for one page.
– qw3n
Aug 2 '16 at 3:45
No you are not, Im using the router but there are some parts that are just html markup that I dont want to inherit them using the router, I just want the markup inherited, Im using the router method now but it seems like overkill
– Mohibeyki
Aug 7 '16 at 14:23
add a comment |
How can I use template inheritance (Like what jade has, extends file.jade and then the blocks with the same name would be overwritten)?
I know that I can do everything with composition, but for components like footer and header which appear on every single page except one or two (e.g.login page) I must write them on every single component. In my app I have a two level navigation and it seems painful to repeat them on every one of those child components :(
I know that I can use jade and then inherit a jade file within my components, but it seems wrong because I would have some jade and some Vue files, is there any other way to do this?
// Component.vue
<template lang="jade">
extends ./StandardLayout
block content
router-view
</template>
// StandardLayout.Vue
<template lang="jade">
div
navbar
div.container
div.spacer
div.row
block content
<template>
What I've settled for, is a layouts folder filled with jade layouts and I use them to extend my components. I used vue-cli with webpack template.
javascript templates vue.js
edited Jul 12 '16 at 13:12
Hashem Qolami
72k20107127
asked Jul 12 '16 at 12:21
Mohibeyki
164213
How can I use template inheritance (Like what jade has, extends file.jade and then the blocks with the same name would be overwritten)?
I know that I can do everything with composition, but for components like footer and header which appear on every single page except one or two (e.g.login page) I must write them on every single component. In my app I have a two level navigation and it seems painful to repeat them on every one of those child components :(
I know that I can use jade and then inherit a jade file within my components, but it seems wrong because I would have some jade and some Vue files, is there any other way to do this?
// Component.vue
<template lang="jade">
extends ./StandardLayout
block content
router-view
</template>
// StandardLayout.Vue
<template lang="jade">
div
navbar
div.container
div.spacer
div.row
block content
<template>
What I've settled for, is a layouts folder filled with jade layouts and I use them to extend my components. I used vue-cli with webpack template.
javascript templates vue.js
javascript templates vue.js
edited Jul 12 '16 at 13:12
Hashem Qolami
72k20107127
asked Jul 12 '16 at 12:21
Mohibeyki
164213
edited Jul 12 '16 at 13:12
Hashem Qolami
72k20107127
asked Jul 12 '16 at 12:21
Mohibeyki
164213
edited Jul 12 '16 at 13:12
Hashem Qolami
72k20107127
edited Jul 12 '16 at 13:12
Hashem Qolami
72k20107127
edited Jul 12 '16 at 13:12
Hashem Qolami
72k20107127
72k20107127
asked Jul 12 '16 at 12:21
Mohibeyki
164213
asked Jul 12 '16 at 12:21
Mohibeyki
164213
asked Jul 12 '16 at 12:21
Mohibeyki
164213
164213
Maybe I'm missing something but if you are using arouter-viewyou should just be dynamically changing out that one element with new page content. So, you only need the layout code for one page.
– qw3n
Aug 2 '16 at 3:45
No you are not, Im using the router but there are some parts that are just html markup that I dont want to inherit them using the router, I just want the markup inherited, Im using the router method now but it seems like overkill
– Mohibeyki
Aug 7 '16 at 14:23
add a comment |
Maybe I'm missing something but if you are using arouter-viewyou should just be dynamically changing out that one element with new page content. So, you only need the layout code for one page.
– qw3n
Aug 2 '16 at 3:45
No you are not, Im using the router but there are some parts that are just html markup that I dont want to inherit them using the router, I just want the markup inherited, Im using the router method now but it seems like overkill
– Mohibeyki
Aug 7 '16 at 14:23
Maybe I'm missing something but if you are using a
router-view you should just be dynamically changing out that one element with new page content. So, you only need the layout code for one page.– qw3n
Aug 2 '16 at 3:45
Maybe I'm missing something but if you are using a
router-view you should just be dynamically changing out that one element with new page content. So, you only need the layout code for one page.– qw3n
Aug 2 '16 at 3:45
No you are not, Im using the router but there are some parts that are just html markup that I dont want to inherit them using the router, I just want the markup inherited, Im using the router method now but it seems like overkill
– Mohibeyki
Aug 7 '16 at 14:23
No you are not, Im using the router but there are some parts that are just html markup that I dont want to inherit them using the router, I just want the markup inherited, Im using the router method now but it seems like overkill
– Mohibeyki
Aug 7 '16 at 14:23
add a comment |
2 Answers
2
active
oldest
votes
In the most general case if you have to repeat the same HTML over and over, one option you could use is <partial>s.
<partial name="header"></partial>
<div>My content content</div>
<partial name="footer"></partial>
Where you declare partials as
Vue.partial('header', '<h3>This is the title: {{title}}</h3>')
Vue.partial('footer', '<footer>Mini footer</footer>')
However if you are building a Single Page Application the strategy you could follow is to simply have a header and a footer around your <router-view>, here is a jsfiddle that demonstrates how to do.
https://jsfiddle.net/gurghet/vdqutw2y/
<header><h1>
My title: {{title}}
</h1></header>
<p>
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<router-view></router-view>
<footer>Such footer, many links, wow!</footer>
answered Aug 8 '16 at 9:08
gurghet
4,56632651
Well I used router view as u suggested, I was looking for a way to DRY html markup :) is it wrong to use stupid (just html markup, without any js) components? it seemed a little silly to me
– Mohibeyki
Aug 8 '16 at 9:40
What I wrote is a proof of concept. If you are developing a large application, of course you want to encapsulate complex HTML in components.
– gurghet
Aug 8 '16 at 10:13
1
by the way, partials no longer exist as of Vue 2.0
– allanberry
Jul 27 '17 at 16:00
add a comment |
If you know Chinses, please look it
// Base Component
<template>
<div class="base-thing special-class">
<Button />
</div>
</template>
<script>
import Button from './ButtonClick'
export default {
components: { Button }
}
</script>
// Inheriting Component
<script>
import BaseComponent from './BaseComponent'
import Button from './OtherButton'
export default {
extends: BaseComponent
components: {
Button
}
}
</script>
The Button of Child Component will be replaced OtherButton. We can do something in the OtherButton
answered Nov 23 at 2:20
Miser
416
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38328760%2fvuejs-template-inheritance%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
In the most general case if you have to repeat the same HTML over and over, one option you could use is <partial>s.
<partial name="header"></partial>
<div>My content content</div>
<partial name="footer"></partial>
Where you declare partials as
Vue.partial('header', '<h3>This is the title: {{title}}</h3>')
Vue.partial('footer', '<footer>Mini footer</footer>')
However if you are building a Single Page Application the strategy you could follow is to simply have a header and a footer around your <router-view>, here is a jsfiddle that demonstrates how to do.
https://jsfiddle.net/gurghet/vdqutw2y/
<header><h1>
My title: {{title}}
</h1></header>
<p>
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<router-view></router-view>
<footer>Such footer, many links, wow!</footer>
answered Aug 8 '16 at 9:08
gurghet
4,56632651
Well I used router view as u suggested, I was looking for a way to DRY html markup :) is it wrong to use stupid (just html markup, without any js) components? it seemed a little silly to me
– Mohibeyki
Aug 8 '16 at 9:40
What I wrote is a proof of concept. If you are developing a large application, of course you want to encapsulate complex HTML in components.
– gurghet
Aug 8 '16 at 10:13
1
by the way, partials no longer exist as of Vue 2.0
– allanberry
Jul 27 '17 at 16:00
add a comment |
In the most general case if you have to repeat the same HTML over and over, one option you could use is <partial>s.
<partial name="header"></partial>
<div>My content content</div>
<partial name="footer"></partial>
Where you declare partials as
Vue.partial('header', '<h3>This is the title: {{title}}</h3>')
Vue.partial('footer', '<footer>Mini footer</footer>')
However if you are building a Single Page Application the strategy you could follow is to simply have a header and a footer around your <router-view>, here is a jsfiddle that demonstrates how to do.
https://jsfiddle.net/gurghet/vdqutw2y/
<header><h1>
My title: {{title}}
</h1></header>
<p>
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<router-view></router-view>
<footer>Such footer, many links, wow!</footer>
answered Aug 8 '16 at 9:08
gurghet
4,56632651
Well I used router view as u suggested, I was looking for a way to DRY html markup :) is it wrong to use stupid (just html markup, without any js) components? it seemed a little silly to me
– Mohibeyki
Aug 8 '16 at 9:40
What I wrote is a proof of concept. If you are developing a large application, of course you want to encapsulate complex HTML in components.
– gurghet
Aug 8 '16 at 10:13
1
by the way, partials no longer exist as of Vue 2.0
– allanberry
Jul 27 '17 at 16:00
add a comment |
In the most general case if you have to repeat the same HTML over and over, one option you could use is <partial>s.
<partial name="header"></partial>
<div>My content content</div>
<partial name="footer"></partial>
Where you declare partials as
Vue.partial('header', '<h3>This is the title: {{title}}</h3>')
Vue.partial('footer', '<footer>Mini footer</footer>')
However if you are building a Single Page Application the strategy you could follow is to simply have a header and a footer around your <router-view>, here is a jsfiddle that demonstrates how to do.
https://jsfiddle.net/gurghet/vdqutw2y/
<header><h1>
My title: {{title}}
</h1></header>
<p>
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<router-view></router-view>
<footer>Such footer, many links, wow!</footer>
answered Aug 8 '16 at 9:08
gurghet
4,56632651
In the most general case if you have to repeat the same HTML over and over, one option you could use is <partial>s.
<partial name="header"></partial>
<div>My content content</div>
<partial name="footer"></partial>
Where you declare partials as
Vue.partial('header', '<h3>This is the title: {{title}}</h3>')
Vue.partial('footer', '<footer>Mini footer</footer>')
However if you are building a Single Page Application the strategy you could follow is to simply have a header and a footer around your <router-view>, here is a jsfiddle that demonstrates how to do.
https://jsfiddle.net/gurghet/vdqutw2y/
<header><h1>
My title: {{title}}
</h1></header>
<p>
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<router-view></router-view>
<footer>Such footer, many links, wow!</footer>
answered Aug 8 '16 at 9:08
gurghet
4,56632651
answered Aug 8 '16 at 9:08
gurghet
4,56632651
answered Aug 8 '16 at 9:08
gurghet
4,56632651
answered Aug 8 '16 at 9:08
gurghet
4,56632651
4,56632651
Well I used router view as u suggested, I was looking for a way to DRY html markup :) is it wrong to use stupid (just html markup, without any js) components? it seemed a little silly to me
– Mohibeyki
Aug 8 '16 at 9:40
What I wrote is a proof of concept. If you are developing a large application, of course you want to encapsulate complex HTML in components.
– gurghet
Aug 8 '16 at 10:13
1
by the way, partials no longer exist as of Vue 2.0
– allanberry
Jul 27 '17 at 16:00
add a comment |
Well I used router view as u suggested, I was looking for a way to DRY html markup :) is it wrong to use stupid (just html markup, without any js) components? it seemed a little silly to me
– Mohibeyki
Aug 8 '16 at 9:40
What I wrote is a proof of concept. If you are developing a large application, of course you want to encapsulate complex HTML in components.
– gurghet
Aug 8 '16 at 10:13
1
by the way, partials no longer exist as of Vue 2.0
– allanberry
Jul 27 '17 at 16:00
Well I used router view as u suggested, I was looking for a way to DRY html markup :) is it wrong to use stupid (just html markup, without any js) components? it seemed a little silly to me
– Mohibeyki
Aug 8 '16 at 9:40
Well I used router view as u suggested, I was looking for a way to DRY html markup :) is it wrong to use stupid (just html markup, without any js) components? it seemed a little silly to me
– Mohibeyki
Aug 8 '16 at 9:40
What I wrote is a proof of concept. If you are developing a large application, of course you want to encapsulate complex HTML in components.
– gurghet
Aug 8 '16 at 10:13
What I wrote is a proof of concept. If you are developing a large application, of course you want to encapsulate complex HTML in components.
– gurghet
Aug 8 '16 at 10:13
1
1
by the way, partials no longer exist as of Vue 2.0
– allanberry
Jul 27 '17 at 16:00
by the way, partials no longer exist as of Vue 2.0
– allanberry
Jul 27 '17 at 16:00
add a comment |
If you know Chinses, please look it
// Base Component
<template>
<div class="base-thing special-class">
<Button />
</div>
</template>
<script>
import Button from './ButtonClick'
export default {
components: { Button }
}
</script>
// Inheriting Component
<script>
import BaseComponent from './BaseComponent'
import Button from './OtherButton'
export default {
extends: BaseComponent
components: {
Button
}
}
</script>
The Button of Child Component will be replaced OtherButton. We can do something in the OtherButton
answered Nov 23 at 2:20
Miser
416
add a comment |
If you know Chinses, please look it
// Base Component
<template>
<div class="base-thing special-class">
<Button />
</div>
</template>
<script>
import Button from './ButtonClick'
export default {
components: { Button }
}
</script>
// Inheriting Component
<script>
import BaseComponent from './BaseComponent'
import Button from './OtherButton'
export default {
extends: BaseComponent
components: {
Button
}
}
</script>
The Button of Child Component will be replaced OtherButton. We can do something in the OtherButton
answered Nov 23 at 2:20
Miser
416
add a comment |
If you know Chinses, please look it
// Base Component
<template>
<div class="base-thing special-class">
<Button />
</div>
</template>
<script>
import Button from './ButtonClick'
export default {
components: { Button }
}
</script>
// Inheriting Component
<script>
import BaseComponent from './BaseComponent'
import Button from './OtherButton'
export default {
extends: BaseComponent
components: {
Button
}
}
</script>
The Button of Child Component will be replaced OtherButton. We can do something in the OtherButton
answered Nov 23 at 2:20
Miser
416
If you know Chinses, please look it
// Base Component
<template>
<div class="base-thing special-class">
<Button />
</div>
</template>
<script>
import Button from './ButtonClick'
export default {
components: { Button }
}
</script>
// Inheriting Component
<script>
import BaseComponent from './BaseComponent'
import Button from './OtherButton'
export default {
extends: BaseComponent
components: {
Button
}
}
</script>
The Button of Child Component will be replaced OtherButton. We can do something in the OtherButton
answered Nov 23 at 2:20
Miser
416
answered Nov 23 at 2:20
Miser
416
answered Nov 23 at 2:20
Miser
416
answered Nov 23 at 2:20
Miser
416
416
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38328760%2fvuejs-template-inheritance%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Maybe I'm missing something but if you are using a
router-viewyou should just be dynamically changing out that one element with new page content. So, you only need the layout code for one page.– qw3n
Aug 2 '16 at 3:45
No you are not, Im using the router but there are some parts that are just html markup that I dont want to inherit them using the router, I just want the markup inherited, Im using the router method now but it seems like overkill
– Mohibeyki
Aug 7 '16 at 14:23