Dynamic layouts example

This commit is contained in:
Sébastien Chopin 2017-03-17 18:03:12 +01:00
parent b6856928db
commit 0a9477dc7b
9 changed files with 119 additions and 0 deletions

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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)
}

View File

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

View File

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

View File

@ -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>

View File

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB