Nuxt has an anonymous HTML template that will be filled continuously with your components, pages, stylesheets, scripts and other contents. You will rarely have a reason to update the template or even see it.
One very important scenario where you may need to customise this template is when you want to add conditional CSS classes for some browsers e.g. IE, Safari and others. Just in case you will want to customise it, this article teaches how to do that.
The default template used by Nuxt can be seen below:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
To customise the default template, create a file named app.html in your default project's root directory, include the default Nuxt container tags and add your customised codes as you may require. Example of a customised Nuxt HTML template that adds conditional CSS classes for IE can be seen below:
<!DOCTYPE html>
<!--[if IE 9]>
<html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}>
<![endif]-->
<!--[if (gt IE 9)|!(IE)]> <!-->
<html {{ HTML_ATTRS }}>
<!--<![endif]-->
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
And that is it, Nuxt will now use this new HTML template when rendering your application.
