[Vuejs]-Pass additional properties to router meta field value

by

0👍

✅

I do this…
src/App.vue

<template>
  <v-app>
    <component :is="layout">
      <router-view :layout.sync="layout" />
    </component>
  </v-app>
</template>

<script>
export default {
  name: "App",
  components: {},
  data: () => ({
    layout: "div"
  })
};
</script>

And then in the view pages i import the template i want to use and pass that along….
This .vue view page uses the basic.vue layout

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Basic from "../layouts/basic.vue";
export default Vue.extend({
  name: "About",
  created() {
    this.$emit("update:layout", Basic);
  }
});
</script>

And this one, a differnt template

<template>
  <div class="dashboard">
    <h1>This is my dashboard page</h1>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Fancy from "../layouts/fancy-with-menu.vue";
export default Vue.extend({
  name: "Dashboard",
  created() {
    this.$emit("update:layout", Fancy);
  }
});
</script>

Leave a comment