├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── commitlint.config.js ├── docs ├── .vuepress │ └── config.js ├── README.md ├── api │ ├── amp-elements.md │ ├── components.md │ ├── options.md │ └── readme.md ├── guide │ ├── setup.md │ ├── styling.md │ └── usage.md ├── package.json └── yarn.lock ├── example ├── assets │ └── styles │ │ ├── amp-custom.scss │ │ └── default.scss ├── layouts │ ├── custom-amp-layout.vue │ ├── custom.vue │ └── default.vue ├── nuxt.config.js ├── pages │ ├── amp-fx.vue │ ├── amp │ │ └── hello.vue │ ├── custom-layout.vue │ ├── hello.vue │ ├── index.vue │ ├── noamp.vue │ └── story.vue └── static │ └── sw.js ├── husky.config.js ├── jest-puppeteer.config.js ├── jest.config.js ├── lib ├── module.js ├── runtime │ ├── components.js │ └── plugin.js ├── tags.js └── utils.js ├── package.json ├── renovate.json ├── templates └── plugin.js ├── test ├── module.options.test.js ├── module.test.js ├── plugin.test.js └── utils.js └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node:erbium-browsers 6 | steps: 7 | # Checkout repository 8 | - checkout 9 | 10 | # Restore cache 11 | - restore_cache: 12 | key: yarn-cache-{{ checksum "yarn.lock" }} 13 | 14 | # Install dependencies 15 | - run: 16 | name: Install Dependencies 17 | command: NODE_ENV=dev yarn 18 | 19 | # Keep cache 20 | - save_cache: 21 | key: yarn-cache-{{ checksum "yarn.lock" }} 22 | paths: 23 | - "node_modules" 24 | 25 | # Lint 26 | - run: 27 | name: Lint 28 | command: yarn lint 29 | 30 | # Tests 31 | - run: 32 | name: Tests 33 | command: yarn jest 34 | 35 | # Coverage 36 | - run: 37 | name: Coverage 38 | command: yarn codecov 39 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Common 2 | node_modules 3 | dist 4 | .nuxt 5 | coverage 6 | 7 | # Plugin 8 | templates/plugin.js 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | extends: [ 8 | '@nuxtjs' 9 | ], 10 | globals: { 11 | page: true, 12 | browser: true, 13 | context: true, 14 | jestPuppeteer: true, 15 | }, 16 | rules: { 17 | 'quote-props': [0] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_Store 8 | coverage 9 | dist 10 | package-lock.json 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [0.5.4](https://github.com/nuxt-community/amp-module/compare/v0.5.3...v0.5.4) (2021-01-24) 6 | 7 | 8 | ### Bug Fixes 9 | 10 | * **routes:** reorder routes to override AMP pages ([#233](https://github.com/nuxt-community/amp-module/issues/233)) ([a9c656d](https://github.com/nuxt-community/amp-module/commit/a9c656d64addc7bdc711cccdbef33566cc035d10)) 11 | 12 | ### [0.5.3](https://github.com/nuxt-community/amp-module/compare/v0.5.2...v0.5.3) (2021-01-10) 13 | 14 | 15 | ### Bug Fixes 16 | 17 | * **style:** resolve uncorrect remove style regex ([#225](https://github.com/nuxt-community/amp-module/issues/225)) ([d995b23](https://github.com/nuxt-community/amp-module/commit/d995b23e5d061c1783d342d81855aec6aa202d2e)) 18 | * disable sanitizer for amp custom style ([063dc14](https://github.com/nuxt-community/amp-module/commit/063dc1429058f7c3ae7dc132821989b69a817ff5)) 19 | 20 | ### [0.5.2](https://github.com/nuxt-community/amp-module/compare/v0.5.1...v0.5.2) (2020-12-27) 21 | 22 | 23 | ### Features 24 | 25 | * add option to control inline styles ([4c3e2d5](https://github.com/nuxt-community/amp-module/commit/4c3e2d598ab5bd54e5efab8dd287b5fa57df53e8)) 26 | * **styling:** keep Nuxt style when `css=false` ([#218](https://github.com/nuxt-community/amp-module/issues/218)) ([fdad34b](https://github.com/nuxt-community/amp-module/commit/fdad34b09534392cd6009b4f1a9eaec41c37eb6b)) 27 | 28 | 29 | ### Bug Fixes 30 | 31 | * **validator:** add `isAMP` to req object ([40d4954](https://github.com/nuxt-community/amp-module/commit/40d4954ff28d3eabfdb7b1c0a8ad1057867a21b6)) 32 | * disable sanitizer for amp custom styles ([93a0964](https://github.com/nuxt-community/amp-module/commit/93a0964a59173d916681c2db347c5e183213f0b1)) 33 | * **styles:** do not remove external styles of font providers ([#217](https://github.com/nuxt-community/amp-module/issues/217)) ([c71406b](https://github.com/nuxt-community/amp-module/commit/c71406bb80438abfc61d9b8afd7ede83ef97dbbb)) 34 | 35 | ### [0.5.1](https://github.com/nuxt-community/amp-module/compare/v0.5.0...v0.5.1) (2020-12-15) 36 | 37 | 38 | ### Bug Fixes 39 | 40 | * add templates directory to npm publish ([#212](https://github.com/nuxt-community/amp-module/issues/212)) ([661d8e3](https://github.com/nuxt-community/amp-module/commit/661d8e3c5e541662e5421d57afcb27d67d54600d)) 41 | 42 | ## [0.5.0](https://github.com/nuxt-community/amp-module/compare/v0.4.0...v0.5.0) (2020-12-13) 43 | 44 | 45 | ### ⚠ BREAKING CHANGES 46 | 47 | * custom amp styles (#206) 48 | 49 | ### Features 50 | 51 | * auto detect style loader ([2e4fd08](https://github.com/nuxt-community/amp-module/commit/2e4fd08472ed67a8e54a0236ea2feb3eaef8cb55)) 52 | * custom amp styles ([#206](https://github.com/nuxt-community/amp-module/issues/206)) ([3950c70](https://github.com/nuxt-community/amp-module/commit/3950c705456e7c3590a69e71e7dbebda64616a32)) 53 | * **module:** add option to disable validator ([fe3c315](https://github.com/nuxt-community/amp-module/commit/fe3c315213217d959a896ffdd6df52ca1f5bd081)), closes [#184](https://github.com/nuxt-community/amp-module/issues/184) 54 | * **tags:** update amp-sticky-ads to 1.0 ([aed2938](https://github.com/nuxt-community/amp-module/commit/aed29384a12493d47182803cf5832d95e4d28dd6)), closes [#183](https://github.com/nuxt-community/amp-module/issues/183) 55 | 56 | 57 | ### Bug Fixes 58 | 59 | * **canonical:** remove unnecessary check of origin ([10fa0fd](https://github.com/nuxt-community/amp-module/commit/10fa0fda630c08f2e7959bcb9953cd7b40acd766)), closes [#181](https://github.com/nuxt-community/amp-module/issues/181) 60 | * **tags:** remove duplicate scripts ([#198](https://github.com/nuxt-community/amp-module/issues/198)) ([#199](https://github.com/nuxt-community/amp-module/issues/199)) ([f069e57](https://github.com/nuxt-community/amp-module/commit/f069e572aef3db5d93320070bb4634c75cccf0e5)) 61 | 62 | ## [0.4.0](https://github.com/nuxt-community/amp-module/compare/v0.3.0...v0.4.0) (2020-09-03) 63 | 64 | 65 | ### Features 66 | 67 | * **tags:** support `amp-inline-gallery` tag ([b95ae98](https://github.com/nuxt-community/amp-module/commit/b95ae981592a1caf420938ccaf58b96a3818186e)), closes [#161](https://github.com/nuxt-community/amp-module/issues/161) 68 | * **tags:** support `amp-inputmask` tag ([1210e5d](https://github.com/nuxt-community/amp-module/commit/1210e5dadb0f027893d78d75f7ae41a3c267479d)), closes [#162](https://github.com/nuxt-community/amp-module/issues/162) 69 | 70 | 71 | ### Bug Fixes 72 | 73 | * **module:** handle undefined routes ([bceda93](https://github.com/nuxt-community/amp-module/commit/bceda93f1791ffb13b08bea3bf3de350f804863f)), closes [#166](https://github.com/nuxt-community/amp-module/issues/166) 74 | 75 | ## [0.3.0](https://github.com/nuxt-community/amp-module/compare/v0.2.4...v0.3.0) (2020-07-16) 76 | 77 | 78 | ### Features 79 | 80 | * support static site generation on Nuxt 2.13+ ([31f27ad](https://github.com/nuxt-community/amp-module/commit/31f27ad3fbe805aa34a91fa9a894cede42560f36)) 81 | * upgrade amp-carousel to v0.2 ([c82f49e](https://github.com/nuxt-community/amp-module/commit/c82f49e753c792a8c222689658f624ca7ce0f07e)), closes [#150](https://github.com/nuxt-community/amp-module/issues/150) 82 | 83 | 84 | ### Bug Fixes 85 | 86 | * add amp-lightbox-gallery regex ([ce43a80](https://github.com/nuxt-community/amp-module/commit/ce43a80673005a3bd5932d336e7cef282fac13eb)), closes [#153](https://github.com/nuxt-community/amp-module/issues/153) 87 | 88 | ### [0.2.4](https://github.com/nuxt-community/amp-module/compare/v0.2.3...v0.2.4) (2020-03-24) 89 | 90 | 91 | ### Features 92 | 93 | * **custom-routes:** create an option to define AMP pages ([81c5717](https://github.com/nuxt-community/amp-module/commit/81c57175614b4484b3708380cc60c1e3e9595568)) 94 | * **custom-tags:** introduce tags option to modify tags detection ([d08b769](https://github.com/nuxt-community/amp-module/commit/d08b7697123eb96d8684e315037c8cb97fba0fcd)) 95 | 96 | ### [0.2.3](https://github.com/nuxt-community/amp-module/compare/v0.2.2...v0.2.3) (2020-02-14) 97 | 98 | 99 | ### Bug Fixes 100 | 101 | * **amp-fx:** provide amp-fx regex ([348aad5](https://github.com/nuxt-community/amp-module/commit/348aad5593fb33ebb9319ee3a94620ae80eaf869)) 102 | 103 | ### [0.2.2](https://github.com/nuxt-community/amp-module/compare/v0.2.1...v0.2.2) (2020-01-24) 104 | 105 | 106 | ### Bug Fixes 107 | 108 | * **route-alis:** preserve route previous aliases ([#91](https://github.com/nuxt-community/amp-module/issues/91)) ([91f3c80](https://github.com/nuxt-community/amp-module/commit/91f3c80e297df90a1b0d357fc7e432fa7b977691)) 109 | * Support amp-bind alternative syntax ([#85](https://github.com/nuxt-community/amp-module/issues/85)) ([b39b846](https://github.com/nuxt-community/amp-module/commit/b39b846a54007408389bdb6022e18b1e07185d1c)) 110 | 111 | ### [0.2.1](https://github.com/nuxt-community/amp-module/compare/v0.2.0...v0.2.1) (2019-10-25) 112 | 113 | 114 | ### Features 115 | 116 | * **404:** return 404 on unavailable amp pages ([79e6d76](https://github.com/nuxt-community/amp-module/commit/79e6d76)) 117 | * **404:** return 404 on unavailable amp pages ([#80](https://github.com/nuxt-community/amp-module/issues/80)) ([fd397f3](https://github.com/nuxt-community/amp-module/commit/fd397f3)) 118 | 119 | ## [0.2.0](https://github.com/nuxt-community/amp-module/compare/v0.1.1...v0.2.0) (2019-09-21) 120 | 121 | 122 | ### ⚠ BREAKING CHANGES 123 | 124 | * with introducing `ampLayout` there no need to force '.amp` posix foa layouts. 125 | * **global-amp-mode:** module does not provide middleware anymore 126 | 127 | ### Bug Fixes 128 | 129 | * **custom-layout:** change to function factory, prevent cache ([71e11e3](https://github.com/nuxt-community/amp-module/commit/71e11e3)) 130 | * do not add `.amp` posix to page layout ([f5abdcb](https://github.com/nuxt-community/amp-module/commit/f5abdcb)) 131 | * fix route generation when in combination with other modules ([03ca25c](https://github.com/nuxt-community/amp-module/commit/03ca25c)) 132 | * fixed route processing, added condition on meta tags ([492d547](https://github.com/nuxt-community/amp-module/commit/492d547)) 133 | * removed double check ([fe67f00](https://github.com/nuxt-community/amp-module/commit/fe67f00)) 134 | 135 | 136 | ### Features 137 | 138 | * **global-amp-mode:** configurable global default ampMode ([0048a20](https://github.com/nuxt-community/amp-module/commit/0048a20)) 139 | 140 | ### [0.1.1](https://github.com/nuxt-community/amp-module/compare/v0.1.0...v0.1.1) (2019-09-13) 141 | 142 | 143 | ### Bug Fixes 144 | 145 | * **amp-validator:** fix amp detection in render hook ([9b3a168](https://github.com/nuxt-community/amp-module/commit/9b3a168)) 146 | * remove empty space in youtube tag ([#43](https://github.com/nuxt-community/amp-module/issues/43)) ([cb4406b](https://github.com/nuxt-community/amp-module/commit/cb4406b)) 147 | * **nuxt-generate:** generate canonical link using module option ([0f5e5ad](https://github.com/nuxt-community/amp-module/commit/0f5e5ad)) 148 | 149 | ### 0.1.0 (2019-09-10) 150 | 151 | Initial Release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Ahad Birang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚡ @nuxtjs/amp 2 | 3 | [![npm version][npm-version-src]][npm-version-href] 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 5 | [![Circle CI][circle-ci-src]][circle-ci-href] 6 | [![Codecov][codecov-src]][codecov-href] 7 | [![Dependencies][david-dm-src]][david-dm-href] 8 | [![Standard JS][standard-js-src]][standard-js-href] 9 | 10 | > AMP (Accelerated Mobile Pages) Module for Nuxt 2 11 | 12 | **DEMO**: https://codesandbox.io/s/github/nuxt-community/amp-module/ 13 | 14 | [📖 **Release Notes**](./CHANGELOG.md) 15 | 16 | 17 | ## Docs 18 | * Getting Started 19 | * [Introduction](docs/README.md) 20 | * [Setup](docs/guide/setup.md) 21 | * [Usage](docs/guide/usage.md) 22 | * [Styling](docs/guide/styling.md) 23 | * Reference 24 | * [API](docs/api/readme.md) 25 | * [Options](docs/api/options.md) 26 | * [AMP elements](docs/api/amp-elements.md) 27 | * [Components](docs/api/components.md) 28 | 29 | 30 | ## Setup 31 | 32 | 1. Add the `@nuxtjs/amp` dependency with `yarn` or `npm` to your project 33 | 2. Add `@nuxtjs/amp` to the `modules` section of `nuxt.config.js` 34 | 3. Configure it: 35 | 36 | ```js 37 | { 38 | modules: [ 39 | // Simple usage 40 | '@nuxtjs/amp', 41 | 42 | // With options 43 | ['@nuxtjs/amp', { /* module options */ }] 44 | ] 45 | } 46 | ``` 47 | 48 | ## Development 49 | 50 | 1. Clone this repository 51 | 2. Install dependencies using `yarn install` or `npm install` 52 | 3. Start development server using `npm run dev` 53 | 54 | ## License 55 | 56 | [MIT License](./LICENSE) 57 | 58 | Copyright (c) Ahad Birang 59 | 60 | 61 | [npm-version-src]: https://img.shields.io/npm/dt/@nuxtjs/amp.svg?style=flat-square 62 | [npm-version-href]: https://npmjs.com/package/@nuxtjs/amp 63 | 64 | [npm-downloads-src]: https://img.shields.io/npm/v/@nuxtjs/amp/latest.svg?style=flat-square 65 | [npm-downloads-href]: https://npmjs.com/package/@nuxtjs/amp 66 | 67 | [circle-ci-src]: https://img.shields.io/circleci/project/github/nuxt-community/amp-module.svg?style=flat-square 68 | [circle-ci-href]: https://circleci.com/gh/nuxt-community/amp-module 69 | 70 | [codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/amp-module.svg?style=flat-square 71 | [codecov-href]: https://codecov.io/gh/nuxt-community/amp-module 72 | 73 | [david-dm-src]: https://david-dm.org/nuxt-community/amp-module/status.svg?style=flat-square 74 | [david-dm-href]: https://david-dm.org/nuxt-community/amp-module 75 | 76 | [standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square 77 | [standard-js-href]: https://standardjs.com 78 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | function isBabelLoader (caller) { 2 | return caller && caller.name === 'babel-loader' 3 | } 4 | 5 | module.exports = function (api) { 6 | if (api.env('test') && !api.caller(isBabelLoader)) { 7 | return { 8 | presets: [ 9 | [ 10 | '@babel/preset-env', 11 | { 12 | targets: { 13 | node: 'current' 14 | } 15 | } 16 | ] 17 | ] 18 | } 19 | } 20 | return {} 21 | } 22 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | '@commitlint/config-conventional' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'AMP Module', 3 | description: 'AMP Module for Nuxt', 4 | themeConfig: { 5 | repo: 'nuxt-community/amp-module', 6 | docsDir: 'docs', 7 | editLinks: true, 8 | editLinkText: 'Edit this page on GitHub', 9 | sidebarDepth: 2, 10 | sidebar: { 11 | '/api/': [ 12 | '/api/options', 13 | '/api/amp-elements', 14 | '/api/components' 15 | ], 16 | '/': [ 17 | { 18 | title: 'Guide', 19 | collapsable: false, 20 | children: [ 21 | '/', 22 | '/guide/setup', 23 | '/guide/usage', 24 | '/guide/styling', 25 | ] 26 | } 27 | ], 28 | }, 29 | nav: [ 30 | { 31 | text: 'Guide', 32 | link: '/' 33 | }, 34 | { 35 | text: 'API', 36 | link: '/api/' 37 | } 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # AMP Module 2 | 3 | AMP module for Nuxt.js. 4 | 5 | ## Links 6 | 7 | * [GitHub](https://github.com/nuxt-community/amp-module) 8 | * [Release Notes](../CHANGELOG.md) 9 | * [Examples](https://github.com/nuxt-community/amp-module/tree/master/example) 10 | 11 | 👉 To get started head to [Setup](./guide/setup.md) section. 12 | -------------------------------------------------------------------------------- /docs/api/amp-elements.md: -------------------------------------------------------------------------------- 1 | # AMP elements 2 | `amp-module` automatically detect AMP elements inside page and inject required scripts. 3 | List of auto detected AMP elements: 4 | - [amp-3d-gltf](https://amp.dev/documentation/components/amp-3d-gltf) 5 | - [amp-3q-player](https://amp.dev/documentation/components/amp-3q-player) 6 | - [amp-access](https://amp.dev/documentation/components/amp-access) 7 | - [amp-access-laterpay](https://amp.dev/documentation/components/amp-access-laterpay) 8 | - [amp-access-poool](https://amp.dev/documentation/components/amp-access-poool) 9 | - [amp-accordion](https://amp.dev/documentation/components/amp-accordion) 10 | - [amp-action-macro](https://amp.dev/documentation/components/amp-action-macro) 11 | - [amp-ad](https://amp.dev/documentation/components/amp-ad) 12 | - [amp-ad-exit](https://amp.dev/documentation/components/amp-ad-exit) 13 | - [amp-addthis](https://amp.dev/documentation/components/amp-addthis) 14 | - [amp-analytics](https://amp.dev/documentation/components/amp-analytics) 15 | - [amp-anim](https://amp.dev/documentation/components/amp-anim) 16 | - [amp-animation](https://amp.dev/documentation/components/amp-animation) 17 | - [amp-apester-media](https://amp.dev/documentation/components/amp-apester-media) 18 | - [amp-app-banner](https://amp.dev/documentation/components/amp-app-banner) 19 | - [amp-audio](https://amp.dev/documentation/components/amp-audio) 20 | - [amp-auto-ads](https://amp.dev/documentation/components/amp-auto-ads) 21 | - [amp-autocomplete](https://amp.dev/documentation/components/amp-autocomplete) 22 | - [amp-base-carousel](https://amp.dev/documentation/components/amp-base-carousel) 23 | - [amp-beopinion](https://amp.dev/documentation/components/amp-beopinion) 24 | - [amp-bind](https://amp.dev/documentation/components/amp-bind) 25 | - [amp-bodymovin-animation](https://amp.dev/documentation/components/amp-bodymovin-animation) 26 | - [amp-brid-player](https://amp.dev/documentation/components/amp-brid-player) 27 | - [amp-brightcove](https://amp.dev/documentation/components/amp-brightcove) 28 | - [amp-byside-content](https://amp.dev/documentation/components/amp-byside-content) 29 | - [amp-call-tracking](https://amp.dev/documentation/components/amp-call-tracking) 30 | - [amp-carousel](https://amp.dev/documentation/components/amp-carousel) 31 | - [amp-consent](https://amp.dev/documentation/components/amp-consent) 32 | - [amp-dailymotion](https://amp.dev/documentation/components/amp-dailymotion) 33 | - [amp-date-countdown](https://amp.dev/documentation/components/amp-date-countdown) 34 | - [amp-date-display](https://amp.dev/documentation/components/amp-date-display) 35 | - [amp-date-picker](https://amp.dev/documentation/components/amp-date-picker) 36 | - [amp-delight-player](https://amp.dev/documentation/components/amp-delight-player) 37 | - [amp-dynamic-css-classes](https://amp.dev/documentation/components/amp-dynamic-css-classes) 38 | - [amp-embedly-card](https://amp.dev/documentation/components/amp-embedly-card) 39 | - [amp-experiment](https://amp.dev/documentation/components/amp-experiment) 40 | - [amp-facebook](https://amp.dev/documentation/components/amp-facebook) 41 | - [amp-facebook-comments](https://amp.dev/documentation/components/amp-facebook-comments) 42 | - [amp-facebook-like](https://amp.dev/documentation/components/amp-facebook-like) 43 | - [amp-facebook-page](https://amp.dev/documentation/components/amp-facebook-page) 44 | - [amp-fit-text](https://amp.dev/documentation/components/amp-fit-text) 45 | - [amp-font](https://amp.dev/documentation/components/amp-font) 46 | - [amp-form](https://amp.dev/documentation/components/amp-form) 47 | - [amp-fx-collection](https://amp.dev/documentation/components/amp-fx-collection) 48 | - [amp-fx-flying-carpet](https://amp.dev/documentation/components/amp-fx-flying-carpet) 49 | - [amp-geo](https://amp.dev/documentation/components/amp-geo) 50 | - [amp-gfycat](https://amp.dev/documentation/components/amp-gfycat) 51 | - [amp-gist](https://amp.dev/documentation/components/amp-gist) 52 | - [amp-google-document-embed](https://amp.dev/documentation/components/amp-google-document-embed) 53 | - [amp-google-vrview-image](https://amp.dev/documentation/components/amp-google-vrview-image) 54 | - [amp-hulu](https://amp.dev/documentation/components/amp-hulu) 55 | - [amp-iframe](https://amp.dev/documentation/components/amp-iframe) 56 | - [amp-ima-video](https://amp.dev/documentation/components/amp-ima-video) 57 | - [amp-image-lightbox](https://amp.dev/documentation/components/amp-image-lightbox) 58 | - [amp-image-slider](https://amp.dev/documentation/components/amp-image-slider) 59 | - [amp-img](https://amp.dev/documentation/components/amp-img) 60 | - [amp-imgur](https://amp.dev/documentation/components/amp-imgur) 61 | - [amp-instagram](https://amp.dev/documentation/components/amp-instagram) 62 | - [amp-install-serviceworker](https://amp.dev/documentation/components/amp-install-serviceworker) 63 | - [amp-izlesene](https://amp.dev/documentation/components/amp-izlesene) 64 | - [amp-jwplayer](https://amp.dev/documentation/components/amp-jwplayer) 65 | - [amp-kaltura-player](https://amp.dev/documentation/components/amp-kaltura-player) 66 | - [amp-layout](https://amp.dev/documentation/components/amp-layout) 67 | - [amp-lightbox](https://amp.dev/documentation/components/amp-lightbox) 68 | - [amp-lightbox-gallery](https://amp.dev/documentation/components/amp-lightbox-gallery) 69 | - [amp-link-rewriter](https://amp.dev/documentation/components/amp-link-rewriter) 70 | - [amp-list](https://amp.dev/documentation/components/amp-list) 71 | - [amp-live-list](https://amp.dev/documentation/components/amp-live-list) 72 | - [amp-mathml](https://amp.dev/documentation/components/amp-mathml) 73 | - [amp-mowplayer](https://amp.dev/documentation/components/amp-mowplayer) 74 | - [amp-mustache](https://amp.dev/documentation/components/amp-mustache) 75 | - [amp-next-page](https://amp.dev/documentation/components/amp-next-page) 76 | - [amp-nexxtv-player](https://amp.dev/documentation/components/amp-nexxtv-player) 77 | - [amp-o2-player](https://amp.dev/documentation/components/amp-o2-player) 78 | - [amp-ooyala-player](https://amp.dev/documentation/components/amp-ooyala-player) 79 | - [amp-orientation-observer](https://amp.dev/documentation/components/amp-orientation-observer) 80 | - [amp-pan-zoom](https://amp.dev/documentation/components/amp-pan-zoom) 81 | - [amp-pinterest](https://amp.dev/documentation/components/amp-pinterest) 82 | - [amp-pixel](https://amp.dev/documentation/components/amp-pixel) 83 | - [amp-playbuzz](https://amp.dev/documentation/components/amp-playbuzz) 84 | - [amp-position-observer](https://amp.dev/documentation/components/amp-position-observer) 85 | - [amp-powr-player](https://amp.dev/documentation/components/amp-powr-player) 86 | - [amp-reach-player](https://amp.dev/documentation/components/amp-reach-player) 87 | - [amp-recaptcha-input](https://amp.dev/documentation/components/amp-recaptcha-input) 88 | - [amp-reddit](https://amp.dev/documentation/components/amp-reddit) 89 | - [amp-riddle-quiz](https://amp.dev/documentation/components/amp-riddle-quiz) 90 | - [amp-script](https://amp.dev/documentation/components/amp-script) 91 | - [amp-selector](https://amp.dev/documentation/components/amp-selector) 92 | - [amp-share-tracking](https://amp.dev/documentation/components/amp-share-tracking) 93 | - [amp-sidebar](https://amp.dev/documentation/components/amp-sidebar) 94 | - [amp-skimlinks](https://amp.dev/documentation/components/amp-skimlinks) 95 | - [amp-smartlinks](https://amp.dev/documentation/components/amp-smartlinks) 96 | - [amp-social-share](https://amp.dev/documentation/components/amp-social-share) 97 | - [amp-soundcloud](https://amp.dev/documentation/components/amp-soundcloud) 98 | - [amp-springboard-player](https://amp.dev/documentation/components/amp-springboard-player) 99 | - [amp-sticky-ad](https://amp.dev/documentation/components/amp-sticky-ad) 100 | - [amp-story](https://amp.dev/documentation/components/amp-story) 101 | - [amp-story-auto-ads](https://amp.dev/documentation/components/amp-story-auto-ads) 102 | - [amp-subscriptions](https://amp.dev/documentation/components/amp-subscriptions) 103 | - [amp-subscriptions-google](https://amp.dev/documentation/components/amp-subscriptions-google) 104 | - [amp-timeago](https://amp.dev/documentation/components/amp-timeago) 105 | - [amp-twitter](https://amp.dev/documentation/components/amp-twitter) 106 | - [amp-user-notification](https://amp.dev/documentation/components/amp-user-notification) 107 | - [amp-video](https://amp.dev/documentation/components/amp-video) 108 | - [amp-video-docking](https://amp.dev/documentation/components/amp-video-docking) 109 | - [amp-video-iframe](https://amp.dev/documentation/components/amp-video-iframe) 110 | - [amp-viewer-assistance](https://amp.dev/documentation/components/amp-viewer-assistance) 111 | - [amp-vimeo](https://amp.dev/documentation/components/amp-vimeo) 112 | - [amp-vine](https://amp.dev/documentation/components/amp-vine) 113 | - [amp-viqeo-player](https://amp.dev/documentation/components/amp-viqeo-player) 114 | - [amp-viz-vega](https://amp.dev/documentation/components/amp-viz-vega) 115 | - [amp-vk](https://amp.dev/documentation/components/amp-vk) 116 | - [amp-web-push](https://amp.dev/documentation/components/amp-web-push) 117 | - [amp-wistia-player](https://amp.dev/documentation/components/amp-wistia-player) 118 | - [amp-yotpo](https://amp.dev/documentation/components/amp-yotpo) 119 | - [amp-youtube](https://amp.dev/documentation/components/amp-youtube) -------------------------------------------------------------------------------- /docs/api/components.md: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | `amp-module` create helper componets in order to better support of amp features. 4 | 5 | ## `` 6 | Some of AMP components have strict rule to place directly in body tag. [amp-story](https://amp.dev/documentation/components/amp-story/?format=stories), [amp-sidebar](https://amp.dev/documentation/components/amp-sidebar/?format=stories#sidebar-for-stories) 7 | This component act as AMP page body and all content of this components will move to page `` 8 | 9 | Example: 10 | ```html 11 | 25 | 26 | 31 | ``` 32 | 33 | ## `` 34 | 35 | This Components used for createing templates in AMP page, templates used in many AMP tags, like [amp-list](https://amp.dev/documentation/components/amp-list) 36 | 37 | Example: 38 | ```html 39 | 58 | 59 | 64 | ``` -------------------------------------------------------------------------------- /docs/api/options.md: -------------------------------------------------------------------------------- 1 | # Options 2 | ## Module Options 3 | 4 | General options of amp module 5 | 6 | | Option | Default | Valid values | Description | 7 | | ------ | ------- | ------------ | ----------- | 8 | | cdnBase | `https://cdn.ampproject.org/v0/` | Any String | A CDN Domain to load AMP elements scripts | 9 | | css | `undefined` | Path to CSS style | Custom styles for AMP pages, eg. `~/assets/style/amp-custom.css`. | 10 | | removeInlineStyles | `true` | By setting this option to `false`, the module will not remove inline styles, instead it will try to merge all inline styles into a single style tag. | 11 | | tags | `{}` | Object of tag options | Define new tags or modify current tags, for instance if you want to use `amp-mustache` version 0.1, tags value must be `{ 'amp-mustache': { version: '0.1' } }` | 12 | | origin | `` | Any String | Main domain of website. Using this AMP modules tries to add missing canonical link for pages. | 13 | | mode | `hybrid` | `only\|hybrid\|false` | Default behaviour of amp module. (`only` all pages serve in AMP mode by default, `hybrid` pages serves in both normal and AMP mode, `false` pages does not serve AMP by default ) | 14 | | validator | `true` | `true\|false` | Validate generated HTML of AMP routes on development environment | 15 | | routeAliases | `auto` | `auto\|Array` | 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']` | 16 | 17 | 18 | ## Page Options 19 | | Option | Type | Default | Valid values | Description | 20 | | ------ | ---- | ------- | ------------ | ----------- | 21 | | amp | `String\|Boolean` | `hybrid` | `only\|hybrid\|false` | Determine behaviour of page. (`only` page serve in AMP mode, `hybrid` page serves in both normal and AMP mode, `false` page does not serve AMP ) | 22 | | ampLayout | `String\|Function` | `default` | Any String | Define layout of page when it renders in AMP mode | 23 | -------------------------------------------------------------------------------- /docs/api/readme.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | - [Options](./options.md) 4 | - [AMP elements](./amp-elements.md) 5 | - [Components](./components.md) 6 | -------------------------------------------------------------------------------- /docs/guide/setup.md: -------------------------------------------------------------------------------- 1 | # Setup 2 | 3 | Install with yarn: 4 | 5 | ```bash 6 | yarn add @nuxtjs/amp 7 | ``` 8 | 9 | Install with npm: 10 | 11 | ```bash 12 | npm install @nuxtjs/amp 13 | ``` 14 | 15 | Edit `nuxt.config.js`: 16 | 17 | ```js 18 | modules: [ 19 | '@nuxtjs/amp' 20 | ], 21 | 22 | amp: { 23 | // Options 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/guide/styling.md: -------------------------------------------------------------------------------- 1 | # Styling 2 | `amp-module` adds a custom class to `body` tag of page, you may use `__amp` class to target elements only in AMP pages. 3 | 4 | ```css 5 | .__amp .my-awesome-element { 6 | 7 | } 8 | ``` 9 | However we recommend to create a separate style file for AMP pages and import it in AMP layout, also remove styles from `nuxt.config` and import those files in default layout instead. 10 | 11 | ```vue 12 | // default.vue 13 | ... 14 | 17 | ``` 18 | 19 | And AMP layout 20 | 21 | ```vue 22 | // default.amp.vue 23 | ... 24 | 27 | ``` 28 | # extractCSS behavior 29 | Unfortunately there is no way (at the moment) to support internal and scoped component styles with `extractCSS`. Even with the `removeInlineStyles` option turned off. 30 | You should copy or move these styles to assets. 31 | -------------------------------------------------------------------------------- /docs/guide/usage.md: -------------------------------------------------------------------------------- 1 | # Usage 2 | 3 | ## Create Layout 4 | Before starting to create pages you may need to create a layout for AMP page (let's call it `default.amp.vue`) 5 | 6 | ```vue 7 | 12 | ``` 13 | 14 | ## Create Page 15 | Creating AMP page is same as non-AMP page, create a Vue file in `pages` folder and start creating your page. 16 | 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. 17 | 18 | `amp-module` inject `$isAMP` on Vue context in order to determine type of current page render. 19 | 20 | ```vue 21 | 29 | 30 | 36 | ``` 37 | 38 | You can use `this.$isAMP` inside page script to check if this is AMP generation or not. 39 | 40 | ```vue 41 | 44 | 45 | 65 | ``` -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "vuepress dev", 5 | "build": "vuepress build" 6 | }, 7 | "devDependencies": { 8 | "vuepress": "^1.8.2" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/assets/styles/amp-custom.scss: -------------------------------------------------------------------------------- 1 | $bg-color: #0cf; 2 | 3 | body { 4 | background: $bg-color; 5 | font-family: Langar; 6 | } -------------------------------------------------------------------------------- /example/assets/styles/default.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fc0; 3 | } -------------------------------------------------------------------------------- /example/layouts/custom-amp-layout.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /example/layouts/custom.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /example/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /example/nuxt.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '..'), 5 | buildDir: resolve(__dirname, '.nuxt'), 6 | srcDir: __dirname, 7 | render: { 8 | resourceHints: false 9 | }, 10 | css: [ 11 | '~/assets/styles/default.scss' 12 | ], 13 | build: { 14 | extractCSS: true 15 | }, 16 | modules: [ 17 | ['nuxt-i18n', { 18 | locales: ['en', 'fr'], 19 | defaultLocale: 'en', 20 | vueI18n: { 21 | fallbackLocale: 'en', 22 | messages: { 23 | en: { 24 | welcome: 'Welcome' 25 | }, 26 | fr: { 27 | welcome: 'Bienvenue' 28 | } 29 | } 30 | } 31 | }], 32 | { handler: require('../') } 33 | ], 34 | amp: { 35 | css: '~/assets/styles/amp-custom.scss', 36 | origin: 'http://localhost:3000' 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/pages/amp-fx.vue: -------------------------------------------------------------------------------- 1 | 279 | 280 | 285 | 286 | 314 | -------------------------------------------------------------------------------- /example/pages/amp/hello.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /example/pages/custom-layout.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /example/pages/hello.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /example/pages/index.vue: -------------------------------------------------------------------------------- 1 | 130 | 131 | 144 | 145 | 162 | -------------------------------------------------------------------------------- /example/pages/noamp.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /example/pages/story.vue: -------------------------------------------------------------------------------- 1 |