Nuxt.js: how to add script in header

Created on 24 Nov 2017  路  8Comments  路  Source: nuxt/nuxt.js

I want to import a script in the header, but I can't success.
En, other question is how to inline this js in the header.
This is my code.
nuxt.config.js:

module.exports = {
  head: {
    title: 'myTitle',
    meta: [
      { charset: 'utf-8' },
      { 'http-equiv': 'pragma', content: 'no-cache' },
      { 'http-equiv': 'cache-control', content: 'no-cache' },
      { 'http-equiv': 'expires', content: '0' },
      { content: 'telephone=no', name: 'format-detection' }
    ],
    script: [
      { src: '~/assets/js/flexible.js' }
    ]
  },
  css: ['~/assets/css/main.css']
}

This question is available on Nuxt.js community (#c1960)
question

Most helpful comment

~ is alias for webpack building. head is used for loading external script, script will not be included in bundled js.

You can move flexible.js into static and change script to { src: '/js/flexible.js' }

All 8 comments

~ is alias for webpack building. head is used for loading external script, script will not be included in bundled js.

You can move flexible.js into static and change script to { src: '/js/flexible.js' }

Thanks for your answer, but how to inline this js in html?

You can use innerHTML to inline the script, but currently vue-meta doesn't support inline script loaded by src.

https://github.com/declandewet/vue-meta#script-object

I do this by your suggestion, but I find it translates quotes.
This is my code.

head: {
    title: 'myTitle',
    meta: [
      { charset: 'utf-8' },
      { 'http-equiv': 'pragma', content: 'no-cache' },
      { 'http-equiv': 'cache-control', content: 'no-cache' },
      { 'http-equiv': 'expires', content: '0' },
      { content: 'telephone=no', name: 'format-detection' }
    ],
    script: [
      { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}
    ]
  },

html:

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log(&quot;hello&quot;)</script>

You need to add __dangerouslyDisableSanitizers: ['script'] in head

https://github.com/declandewet/vue-meta#__dangerouslydisablesanitizers-string

Thanks!

~ is alias for webpack building. head is used for loading external script, script will not be included in bundled js.

You can move flexible.js into static/js and change script to { src: '/js/flexible.js' }

FTFY

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gary149 picture gary149  路  3Comments

mikekidder picture mikekidder  路  3Comments

vadimsg picture vadimsg  路  3Comments

vadimsg picture vadimsg  路  3Comments

mattdharmon picture mattdharmon  路  3Comments