mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Dynamic layouts example
This commit is contained in:
parent
b6856928db
commit
0a9477dc7b
3
examples/dynamic-layouts/README.md
Normal file
3
examples/dynamic-layouts/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Dynamic Layouts
|
||||
|
||||
https://nuxtjs.org/examples/layouts
|
25
examples/dynamic-layouts/layouts/error.vue
Normal file
25
examples/dynamic-layouts/layouts/error.vue
Normal 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>
|
37
examples/dynamic-layouts/layouts/mobile.vue
Normal file
37
examples/dynamic-layouts/layouts/mobile.vue
Normal 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>
|
4
examples/dynamic-layouts/middleware/mobile.js
Normal file
4
examples/dynamic-layouts/middleware/mobile.js
Normal 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)
|
||||
}
|
10
examples/dynamic-layouts/nuxt.config.js
Normal file
10
examples/dynamic-layouts/nuxt.config.js
Normal file
@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
head: {
|
||||
meta: [
|
||||
{ content: 'width=device-width,initial-scale=1', name: 'viewport' }
|
||||
]
|
||||
},
|
||||
router: {
|
||||
middleware: ['mobile']
|
||||
}
|
||||
}
|
11
examples/dynamic-layouts/package.json
Normal file
11
examples/dynamic-layouts/package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "nuxt-dynamic-layouts",
|
||||
"dependencies": {
|
||||
"nuxt": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start"
|
||||
}
|
||||
}
|
17
examples/dynamic-layouts/pages/about.vue
Normal file
17
examples/dynamic-layouts/pages/about.vue
Normal 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>
|
12
examples/dynamic-layouts/pages/index.vue
Normal file
12
examples/dynamic-layouts/pages/index.vue
Normal 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>
|
BIN
examples/dynamic-layouts/static/logo.png
Normal file
BIN
examples/dynamic-layouts/static/logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
Loading…
Reference in New Issue
Block a user