usage.md

Usage

Create Layout

Before starting to create pages you may need to create a layout for AMP page (let's call it default.amp.vue)

<template>
  <div>
    <Nuxt />
  </div>
</template>

Create Page

Creating AMP page is same as non-AMP page, create a Vue file in pages folder and start creating your page. If you want to have a page that generate both AMP and non-AMP html, you can use $isAMP variable to conditionally show/hide components.

amp-module inject $isAMP on Vue context in order to determine type of current page render.

<template>
    <div v-if="$isAMP">
        <amp-img src="nuxt.js.svg" >
    </div>
    <div v-else>
        <img src="nuxt.js.svg" >
    </div>
</template>

<script>
export default {
    amp: 'hybrid',
    ampLayout: 'default.amp',
}
</script>

You can use this.$isAMP inside page script to check if this is AMP generation or not.

<template>
    ...
</template>

<script>
export default {
    amp: 'hybrid',
    ampLayout: 'default.amp',
    ...
    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>