const modifyHtml = (html) => { // Add amp-custom tag to added CSS html = html.replace(/<style data-vue-ssr/g, '<style amp-custom data-vue-ssr') // Remove every script tag from generated HTML html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '') // Add AMP script before </head> const ampScript = '<script async src="https://cdn.ampproject.org/v0.js"></script>' html = html.replace('</head>', ampScript + '</head>') return html } export default { head: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width,minimum-scale=1' } ], link: [ { rel: 'canonical', href: '/' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } ] }, css: ['~/assets/main.css'], loading: false, // Disable loading bar since AMP will not generate a dynamic page render: { // Disable resourceHints since we don't load any scripts for AMP resourceHints: false }, hooks: { // This hook is called before generatic static html files for SPA mode 'generate:page': (page) => { page.html = modifyHtml(page.html) }, // This hook is called before rendering the html to the browser 'render:route': (url, page, { req, res }) => { page.html = modifyHtml(page.html) } } }