CODEWITHSUNDEEP
javascripthtmlvue.jsnuxt.js
Sylvadoc
Sylvadoc

Reputation: 51

How to customize nuxt default html template

I try to customize the default page from Nuxt app but the documentation is very poor :

https://nuxtjs.org/guide/views#document

What if i want to get only the title for example ? or only the links in the head ?

{{ HEAD.links }}

or only the meta ?

{{ HEAD.meta }}

I don't know the syntax, is this handlebars or something equivalent ?

Thank you !

Upvotes: 3

Views: 9112

Answers (1)

Nicolas Pennec
Nicolas Pennec

Reputation: 7631

if you look in the source code, you can found only 4 custom meta:

  • HTML_ATTRS
  • BODY_ATTRS
  • HEAD
  • BODY_SCRIPTS

see https://github.com/nuxt/nuxt.js/blob/ef7a42649dcee7e65886b2db1a329deecd93aff2/lib/core/meta.js#L40-L45

the HEAD meta is not an object, but an string concat:

// Get vue-meta context
const m = await this.getMeta(url)

...

// HEAD tags
meta.HEAD =
  m.meta.text() +
  m.title.text() +
  m.link.text() +
  m.style.text() +
  m.script.text() +
  m.noscript.text()

so you cannot get {{ HEAD.links }}

But, from your nuxt.config.js file, you can override all that HEAD data.

eg. if you want only keep the title:

replace:

head: {
  title: 'starter',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: 'Nuxt.js project' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
}

by:

head: {
  title: 'starter'
},

Upvotes: 2

Related Questions