nuxt-ampify
Advanced tools
AMP Module that converts Nuxt Application to AMP (Accelerated Mobile Pages) with many fancy features & optimization!
nuxt-ampify dependency to your projectnpm install nuxt-ampify # or yarn add nuxt-ampify
nuxt-ampify to the modules section of nuxt.config.js{
modules: [
// Simple usage
'nuxt-ampify',
// With options
['nuxt-ampify', { /* module options */ }]
],
ampify: {
//module options
}
}
nuxt-ampify is basically a fork of @nuxtjs/amp since most of the code were forked there. Many configurations are compatible from @nuxtjs/amp even the variable $isAMP is included there too.
Many examples and descriptions were more or less copied from @nuxtjs/amp.
If you have @nuxtjs/amp and you wish to use this module, then I would suggest to remove @nuxtjs/amp from nuxt.config.js to avoid any conflicts.
The goal of this module is to keep up-to-date and adding more extra features such as converting most of the HTML into AMP Mode, auto updating AMP Cache etc.
Following features of this module:
LocalCache - for faster speed
AMP Cache Updater - to make your Website up-to-date
AMP Optimizer - to optimize Website even further
Auto Image-Attribute: Adding width/height attributes automatically, depending:
All CSS related elements such as <style> and <link> (even external links works here, but it is not recommended) will be automatically converted into single <style amp-custom>*</style> element at the head.
AMP only allows 75000 bytes on single <style> element. Thats why this module has many CSS optimizer features. Depending on options, CSS which are on <style amp-custom>*</style> sizes will be reduced dramatically. Following depencies are being used:
This modules, like from @nuxtjs/amp, inject $isAMP on Vue context which can be used as example.
<template>
<div v-if="$isAMP">
I'M ON AMP ⚡
</div>
<div v-else>
I'M ON ORIGINAL MODE
</div>
</template>
<script>
export default {
amp: 'hybrid'
}
</script>
You can also use $isAMP inside of script
<template>
...
</template>
<script>
export default {
amp: 'hybrid',
...
mounted() {
// fetch list of entities on normal page
// we use `amp-list` to fetch and show these entities
if (!this.$isAMP) {
this.fetchList();
}
},
methods: {
// fetch list of entities to show
fetchList() {
...
}
}
}
</script>
{
mode: 'hybrid',
routeAliases: 'auto',
updateCache: {
origin: '',
privateKey: '',
},
localCache: (process.env.NODE_ENV == "production"),
optimizer: true,
converter: {
image: true,
routeClassActive: ["nuxt-link-active", "is-active"]
},
css: {
purge: {
keyframes: true,
},
minify: true,
shorten: true
},
styles: null,
events: {
beforeAMPify: null,
beforeStyleToHead: null,
afterAMPify: null
}
}
You can either enable AMP-only website with mode: "only", allowing to have hybrid mode, meaning one website is original and one website is in AMP mode, by mode: "hybrid" or disable it completly by using mode: false
{
// Default: "hybrid"
mode: "only" | "hybrid" | false
}
Allows to limit route aliases to only AMP pages. With auto the module will create aliases for every route. If your app uses AMP only on a few routes you can provide those routes into an Array. Routes are absolute, without '/amp' prefix, eg. ['/story', '/page2']
{
// Default: "auto"
routeAliases: "auto" | ["/story", "/page2"]
}
Do not confuse this with localCache. AMP Cache is provided by external providers as example Google AMP Cache.
To enable AMP Cache Updater, you will need to generate RSA key if you don't have it already.
{
updateCache: {
origin: "example.com", // Default: null, Valid values: any root domain as string
privateKey: "/path/to/your/rsa/private.key" // Default: null, Valid values: path to private key file.
}
}
LocalCache can be enabled or disabled under configuration.
{
// Default: (process.env.NODE_ENV == "production")
localCache: true | false
}
It is suggested to enable AMP-Optimizer since it take cares for adding missing scripts, removing AMP boilerplate when possible etc.
{
// Default: true
optimizer: true | false
}
You can adjust the converter by using following settings:
You can disable the <img> to <amp-img> converter by setting to false at converter.image settings.
{
converter: {
// Default: true
image: true | false
}
}
If you want to add class to the current active route at <a href="{currentRoute}">, then you can do following:
{
converter: {
// Default: ["nuxt-link-active", "is-active"]
routeClassActive: ["nuxt-link-active", "is-active"] | null
}
}
This will make sure that the current route at <a href="{currentRoute}"> will be set to <a href="{currentRoute}" class="nuxt-link-active is-active">
To make sure that the styles would fit on a AMP Website, there were following features implemented:
It purges unused class names from style. The settings can be used from the PurgeCSS Configuration. And yes, you can still use the nuxt-purgecss module. It won't affect to this module.
{
css: {
purge: {
// Default: true
keyframes: true,
// Default: undefined - This is just an example.
whitelist: ["random", "yep", "button"]
}
}
}
Minify the CSS from styles, to make it even smaller
{
css: {
// Default: true
minify: true | false
}
}
A custom build CSS/HTML class name shortener (As example .className will being converted into .a).
It still pretty in alpha version and can contain bugs. Any helps are here welcome!
Since this is still on alpha, we'll disable this feature for a while. I'm expecting for any error/bugs with this functionality.
{
css: {
// Default: false
shorten: true | false
}
}
Apply .css files which should be only loaded in AMP mode. It can be useful if something needs to be fixed in AMP Mode while on normal website work as it should be.
{
// Default: null
// Valid values: string or Array of path.
styles: "~/assets/css/amp.css" | ["~/assets/css/amp.css", "~/assets/css/menu-amp-fix.css"]
}
Just in case if you need to manipulate the content by yourself, you can do following events:
{
events: {
beforeAMPify: (page, options, currentRoute) => {
// Do something here before AMPify runs.
// You can access HTML per page.html (read and write).
// Example:
page.html = page.html.replace(/replace something/gi, "replace that before AMPify runs it");
},
beforeStyleOptimization: (page, style, options, currentRoute) => {
// Do something here before the CSS will be unreadable due minify, shorten and removed by PurgeCSS.
// You can access HTML per page.html and CSS per style variable (read and write)
// Example:
style = style.replace(/\.is-active/gi, ".is-nuxt-active");
},
beforeStyleToHead: (page, style, options, currentRoute) => {
// Similar to beforeStyleOptimization - the style is already optimized and is going to be applied to <head> element at the next step.
},
afterAMPify: (page, options, currentRoute) => {
// Do something here after AMPify has done their job before it is being sent to client.
}
}
}
The functions can be used for async too.
We're using following branch:
To contribute:
npm install or yarn installexample with cd example && npm install && cd ..git checkout devnpm run devCopyright (c) YanDev account@yandev.de
FAQs
Convert Nuxt Application to AMP (Accelerated Mobile Pages)
The npm package nuxt-ampify receives a total of 3 weekly downloads. As such, nuxt-ampify popularity was classified as not popular.
We found that nuxt-ampify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.