vite-plugin-amp

Zero-config AMP for Vite

Usage no npm install needed!

<script type="module">
  import vitePluginAmp from 'https://cdn.skypack.dev/vite-plugin-amp';
</script>

README

vite-plugin-amp logo

npm version code style: prettier Commitizen friendly semantic-release MIT License

vite-plugin-amp

Vite plugin for AMP project

Features

  • Remove all denied script tag
  • Inline all styles to amp-custom
  • img tag to amp-img
  • Automatically import all missing AMP component scripts.
  • Automatically add any missing mandatory AMP tags.
  • Optimize via amp-toolbox
  • Full AMP

Usage

npm i vite-plugin-amp -D # yarn add vite-plugin-amp -D

Add it to vite.config.ts

// vite.config.ts
import ViteAMP from 'vite-plugin-amp'

export default {
  plugins: [ViteAMP()]
}

Support

Support for only Server Side Generation. Please see example.

  • Vue3
  • React
  • Preact
  • lit-element

Limitation

AMP Project has limitation of Native JavaScript. Native Javascript doesn't work unless it's in the amp-script tag.

If you want to manage state, you can use amp-bind tag.

Todo

  • Frameworks other than Vue3
  • Add custom CSS size check
  • Hybrid mode
  • Optimize development environment

License

MIT