Nuxt.js: feat: amp-module

Created on 7 Nov 2018 · 10Comments · Source: nuxt/nuxt.js

What problem does this feature solve?

Use nuxt start:amp to generate an AMP Web page for the NUXT project.

_{This feature request is available on Nuxt community (#c8106)}

like: https://www.cloudflare.com/website-optimization/accelerated-mobile-links/

contributions welcome feature-request

Source

zuohuadong

Most helpful comment

i guess most people don't want to setup a new project just to deliver amp pages.. so i solved this by adding this to to the nuxt.config:

 hooks: {
    // This hook is called before saving the html to flat file
    'generate:page': page => {
      if (/^\/amp\//gi.test(page.route)) {
        page.html = ampify(page.html)
      }
    },
    // This hook is called before serving the html to the browser
    'render:route': (url, page, { req, res }) => {
      if (/^\/amp\//gi.test(url)) {
        page.html = ampify(page.html)
      }
    }
  },
````

ampify module example: https://gist.github.com/podlebar/c671b431f3eda6a6135760c237de2940

adding a middleware like isAmp.js:

export default function(ctx) {
ctx.isAmp = false
if (ctx.route.fullPath.includes('/amp/', 0)) {
ctx.isAmp = true
}
}
```

than in your pages you can switch layouts like:
layout: ({ isAmp }) => (isAmp ? 'amp' : 'default'), while amp layout does not contain navigations and so on..

never the less.. the hard part in AMP is transforming the content html to valid AMP markup.. so in the example there is a basic transform of audio to amp-audio but as will often end up having a slider or so u need to transform it yourself to amp-carousel or so..

https://github.com/jbhannah/amperize is a module u could use to transform the content between the body but also this will not solve sliders, picture vs figures and so on

podlebar on 22 Nov 2018

👍3

All 10 comments

Take a look at https://github.com/nuxt/nuxt.js/tree/dev/examples/with-amp ☺️

manniL on 8 Nov 2018

Take a look at https://github.com/nuxt/nuxt.js/tree/dev/examples/with-amp ☺️

like: https://www.cloudflare.com/website-optimization/accelerated-mobile-links/

Convert a regular web page to amp.

zuohuadong on 10 Nov 2018

I guess that'd be a nice module idea.

manniL on 20 Nov 2018

i guess most people don't want to setup a new project just to deliver amp pages.. so i solved this by adding this to to the nuxt.config:

 hooks: {
    // This hook is called before saving the html to flat file
    'generate:page': page => {
      if (/^\/amp\//gi.test(page.route)) {
        page.html = ampify(page.html)
      }
    },
    // This hook is called before serving the html to the browser
    'render:route': (url, page, { req, res }) => {
      if (/^\/amp\//gi.test(url)) {
        page.html = ampify(page.html)
      }
    }
  },
````

ampify module example: https://gist.github.com/podlebar/c671b431f3eda6a6135760c237de2940

adding a middleware like isAmp.js:

export default function(ctx) {
ctx.isAmp = false
if (ctx.route.fullPath.includes('/amp/', 0)) {
ctx.isAmp = true
}
}
```

than in your pages you can switch layouts like:
layout: ({ isAmp }) => (isAmp ? 'amp' : 'default'), while amp layout does not contain navigations and so on..

https://github.com/jbhannah/amperize is a module u could use to transform the content between the body but also this will not solve sliders, picture vs figures and so on

podlebar on 22 Nov 2018

👍3

@podlebar
That's great. Can a project using APOLLO-GRAPHQL also work properly?

zuohuadong on 22 Nov 2018

i guess u just need https://github.com/nuxt-community/apollo-module for that

podlebar on 22 Nov 2018

@podlebar Would you be interested in developing a module for that behavior?

manniL on 22 Nov 2018

interested yes.. but short in time.. also there need to be a lot of flexibility because some use url.com/amp/foo/bar some amp.url.com/foo/bar or url.com/foo/bar?amp=true so all this would need some handling..
the module would need to be super flexible also in sense of transforming the markup..

i can try but it will be christmas time i guess

podlebar on 22 Nov 2018

@podlebar Take your time ☺️
Also, not all functionality has to be included in 1.0 :P

manniL on 22 Nov 2018

Now, there is a module to create AMP pages. AMP-module
It is better to move issues and conversations about AMP to there.