Dynamic layouts example

examples/dynamic-layouts/README.md

@@ -0,0 +1,3 @@
+# Dynamic Layouts
+
+https://nuxtjs.org/examples/layouts

examples/dynamic-layouts/layouts/error.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="container">
+    <h1 v-if="error.statusCode === 404">Page not found</h1>
+    <h1 v-else>An error occured</h1>
+    <nuxt-link to="/">Home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: ({ isMobile }) => isMobile ? 'mobile' : 'default',
+  props: ['error']
+}
+</script>
+
+<style scoped>
+.container {
+  font-family: sans-serif;
+  padding-top: 10%;
+  text-align: center;
+}
+h1 {
+  font-size: 20px;
+}
+</style>

examples/dynamic-layouts/layouts/mobile.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="dark">
+    <div class="mobile-banner">Mobile website</div>
+    <nuxt/>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+.dark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100%;
+  background: black;
+  color: white;
+  padding: 10px;
+  padding-top: 40px;
+}
+.dark a {
+  color: white;
+}
+.mobile-banner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 10px;
+  background: #333;
+  font-family: sans-serif;
+  font-size: 13px;
+}
+</style>

examples/dynamic-layouts/middleware/mobile.js

@@ -0,0 +1,4 @@
+export default function (ctx) {
+  let userAgent = ctx.req ? ctx.req.headers['user-agent'] : navigator.userAgent
+  ctx.isMobile = /mobile/i.test(userAgent)
+}

examples/dynamic-layouts/nuxt.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  head: {
+    meta: [
+      { content: 'width=device-width,initial-scale=1', name: 'viewport' }
+    ]
+  },
+  router: {
+    middleware: ['mobile']
+  }
+}

examples/dynamic-layouts/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "nuxt-dynamic-layouts",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/dynamic-layouts/pages/about.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <p>Hi from {{ name }}</p>
+    <nuxt-link to="/">Home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: ({ isMobile }) => isMobile ? 'mobile' : 'default',
+  asyncData ({ req }) {
+    return {
+      name: req ? 'server' : 'client'
+    }
+  }
+}
+</script>

examples/dynamic-layouts/pages/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="container">
+    <h1>Welcome!</h1>
+    <nuxt-link to="/about">About page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: ({ isMobile }) => isMobile ? 'mobile' : 'default',
+}
+</script>