CODEWITHSUNDEEP
javascriptvuejs2
jstaker7
jstaker7

Reputation: 1236

How to use a component as a reusable template in Vue?

I'm working on a multipage application using Vue, and in my project I have a directory called "pages" which contains subdirectories for each page. The subdirectories contain their own App.vue and main.js, like so:

src
|
+--pages
  |
  +--Home
  |  |
  |  +-- App.vue
  |  +-- main.js
  |
  +--About/
  |  |
  |  +-- App.vue
  |  +-- main.js
  |
  +--base.vue

I'm coming from Django-land, where can I have a template that houses most of the style information, headers, etc., and I can reuse the template across pages and inject content, and I'm trying to do the same here. I have most of my website in base.vue, and I want to be able to render different content as provided by the other pages.

For example:

base.vue

<template>
<div>
  Header text.
  <div id="body">
  </div>
</div>
</template>

<style>
@import '../assets/style.css';
</style>

<script>
...
</script>

And Home/App.vue

<template>
<div id="app">
  <div id="body"> <-- replace for this in base.vue, and use the styles defined in base.vue.
  New content
  </div>
</div>
</template>

<style>
</style>

<script>
...
</script>

So the page would essentially look like this:

Header text.
New content

How would I go about this using Vue?

Upvotes: 1

Views: 382

Answers (1)

Neha Sharma
Neha Sharma

Reputation: 772

You need 'slot templates' for this:

https://v2.vuejs.org/v2/guide/components-slots.html

https://alligator.io/vuejs/component-slots/

Thank you!!

Upvotes: 1

Related Questions