example: Add routes-meta example

examples/routes-meta/layouts/default.vue

@@ -0,0 +1,67 @@
+<template>
+  <div :class="$store.state.theme" class="theme">
+    <div class="nav horizontal-align">
+      <nuxt-link class="nav-item" to="/">Home</nuxt-link>
+      <nuxt-link class="nav-item" to="/about">About</nuxt-link>
+      <nuxt-link class="nav-item" to="/parent">Parent page</nuxt-link>
+    </div>
+    <nuxt class="container" />
+  </div>
+</template>
+
+<style>
+body,
+html {
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+}
+.nav-item {
+  text-decoration: none;
+  font-size: 1.2em;
+}
+.theme {
+  min-height: 100vh;
+  padding-top: 2rem;
+}
+/*
+** Light theme
+*/
+.theme.light {
+  background: #f5f5f5;
+  color: #202020;
+}
+.theme.light a {
+  color: #555;
+}
+/*
+** Dark theme
+*/
+.theme.dark {
+  background: #202020;
+  color: #f5f5f5;
+}
+.theme.dark a {
+  color: #eee;
+}
+/*
+** Orange theme
+*/
+.theme.orange {
+  background: #ffc107;
+  color: #795548;
+}
+.theme.orange a {
+  color: #202020;
+}
+/*
+** Blue theme
+*/
+.theme.blue {
+  background: #3f51b5;
+  color: #f5f5f5;
+}
+.theme.blue a {
+  color: #eee;
+}
+</style>

examples/routes-meta/middleware/theme.js

@@ -0,0 +1,5 @@
+export default ({ route, app }) => {
+  // Take the last value (latest route child)
+  const theme = route.meta.reduce((theme, meta) => meta.theme || theme, 'light')
+  app.store.commit('SET_THEME', theme)
+}

examples/routes-meta/nuxt.config.js

@@ -0,0 +1,6 @@
+export default {
+  router: {
+    middleware: ['theme']
+  },
+  css: ['wingcss']
+}

examples/routes-meta/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-hello-world",
+  "dependencies": {
+    "nuxt-edge": "latest",
+    "wingcss": "^1.0.0-beta"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/routes-meta/pages/about.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>About</h1>
+    <p> I am the about page and have set in my component:</p>
+    <pre>export default {
+  meta: {
+    theme: 'dark'
+  }
+}</pre>
+  </div>
+</template>
+
+<script>
+export default {
+  meta: {
+    theme: 'dark'
+  }
+}
+</script>
+
+<style scoped>
+pre {
+  padding: 0.2rem 0.5rem;
+  margin: 0 0.2rem;
+  font-size: 90%;
+  background: #f1f1f1;
+  color: #202020;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  font-family: Consolas, Monaco, Menlo, monospace;
+}
+</style>

examples/routes-meta/pages/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1>Page with meta</h1>
+    <p>This example is made to illustrate the usafe of
+      <code>meta</code> inside the page components.
+    </p>
+    <p>We have a middleware setup in
+      <code>~/middleware/theme.js</code> used to get which theme has to be applied and commit it to the store.
+    </p>
+    <p>Then, in our layout, we simply use
+      <code>$store.state.theme</code> as a class to change our CSS dynamically.
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

examples/routes-meta/pages/parent.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Parent</h1>
+    Checkout
+    <nuxt-link to="/parent/blue">Blue page</nuxt-link>
+    <nuxt-child/>
+  </div>
+</template>
+
+<script>
+export default {
+  meta: {
+    theme: 'orange'
+  }
+}
+</script>

examples/routes-meta/pages/parent/blue.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3>I am the blue page</h3>
+    <p>I am a child of /parent, and the theme is overwritten by myself!</p>
+    <p>Go back to
+      <nuxt-link to="/parent">Parent</nuxt-link>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  meta: {
+    theme: 'blue'
+  }
+}
+</script>

examples/routes-meta/store/index.js

@@ -0,0 +1,9 @@
+export const state = () => ({
+  theme: 'light'
+})
+
+export const mutations = {
+  SET_THEME(state, theme) {
+    state.theme = theme
+  }
+}