Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-12-06 04:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial work on a fully validating AMP example.

Browse Source 
* Requires one change to include a new mode option of 'ssr' which does
  *only* SSR, no universal app (i.e. no inserted script tags).
* AMP example that has required head elements, style/noscript tags, etc.
  to pass validation.
* Fixes nuxt/nuxt.js#878
This commit is contained in:
Pete Johanson 2017-10-04 23:20:19 -04:00
parent f654c9c94c
commit 94092ba779
8 changed files with 94 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/amp/README.md Normal file
View File

@ -0,0 +1,3 @@
# AMP Hello World with Nuxt.js
https://nuxtjs.org/examples

11
examples/amp/app.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html ⚡ {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
<script src="https://cdn.ampproject.org/v0.js" async></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>

11
examples/amp/components/Byline.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div class="byline">
{{author}}
</div>
</template>
<script>
export default {
props: [ 'author' ]
}
</script>

13
examples/amp/nuxt.config.js Normal file
View File

@ -0,0 +1,13 @@
module.exports = {
head: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width,minimum-scale=1' }
]
},
mode: 'ssr',
render: {
resourceHints: false
},
loading: false
}

11
examples/amp/package.json Normal file
View File

@ -0,0 +1,11 @@
{
"name": "amp-nuxt",
"dependencies": {
"nuxt": "../../"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}

21
examples/amp/pages/about.vue Executable file
View File

@ -0,0 +1,21 @@
<template>
<div>
<p>Hi from {{ name }}</p>
<nuxt-link to="/">Home page</nuxt-link>
</div>
</template>
<script>
export default {
asyncData ({ isStatic, isServer }) {
return {
name: isStatic ? 'static' : (isServer ? 'server' : 'client')
}
},
head: {
link: [
{ rel: 'canonical', href: 'http://localhost:3000/?html' }
]
}
}
</script>

19
examples/amp/pages/index.vue Executable file
View File

@ -0,0 +1,19 @@
<template>
<div>
<h1>Welcome!</h1>
<nuxt-link to="/about">About page</nuxt-link>
<byline author="Pete Johanson"></byline>
</div>
</template>
<script>
import Byline from '~/components/Byline'
export default {
components: { Byline },
head: {
link: [
{ rel: 'canonical', href: 'http://localhost:3000/?html' }
]
}
}
</script>

7
lib/core/renderer.js
View File

@ -532,8 +532,11 @@ export default class Renderer extends Tapable {
resourceHints = context.renderResourceHints()
HEAD += resourceHints
}
APP += `<script type="text/javascript">window.__NUXT__=${serialize(context.nuxt, { isJSON: true })};</script>`
APP += context.renderScripts()
if (this.options.mode != 'ssr') {
APP += `<script type="text/javascript">window.__NUXT__=${serialize(context.nuxt, { isJSON: true })};</script>`
APP += context.renderScripts()
}
HEAD += context.renderStyles()