diff --git a/examples/with-amp/app.html b/examples/with-amp/app.html new file mode 100644 index 0000000000..4b77b8ada1 --- /dev/null +++ b/examples/with-amp/app.html @@ -0,0 +1,11 @@ + + +
+ {{ HEAD }} + + + + + {{ APP }} + + diff --git a/examples/with-amp/assets/main.css b/examples/with-amp/assets/main.css new file mode 100644 index 0000000000..6d33a3cafe --- /dev/null +++ b/examples/with-amp/assets/main.css @@ -0,0 +1,23 @@ +body { + font-family: Roboto, sans-serif; + padding: 30px; + color: #444; +} +h1 { + margin-bottom: 5px; +} +.caption { + color: #ccc; + margin-top: 0; + font-size: 14px; + text-align: center; +} +.byline { + color: #aaa; + margin-bottom: 25px; +} +p { + font-size: 18px; + line-height: 30px; + margin-top: 30px; +} diff --git a/examples/with-amp/components/Byline.vue b/examples/with-amp/components/Byline.vue new file mode 100644 index 0000000000..b30c905af6 --- /dev/null +++ b/examples/with-amp/components/Byline.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/examples/with-amp/nuxt.config.js b/examples/with-amp/nuxt.config.js new file mode 100644 index 0000000000..69963667c7 --- /dev/null +++ b/examples/with-amp/nuxt.config.js @@ -0,0 +1,33 @@ +module.exports = { + head: { + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width,minimum-scale=1' } + ], + link: [ + { rel: 'canonical', href: '/' }, + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } + ] + }, + css: ['~/assets/main.css'], + loading: false, // Disable loading bar since AMP will not generate a dynamic page + render: { + // Disable resourceHints since we don't load any scripts for AMP + resourceHints: false + }, + hooks: { + // This hook is called before rendering the html to the browser + 'render:route': (url, result) => { + let html = result.html + // Add amp-custom tag to added CSS + html = html.replace(/