Search code examples
cssvue.jsinternet-explorerstylesheetnuxt.js

Conditional stylesheet in Nuxt

My CSS is not rendering well in Internet explorer even after using IE prefixes. So I want to try conditional stylesheet, but I'm not sure how to go about that in Nuxt

In Nuxt the best bet is to use CSS Conditional stylesheet in nuxt.config.js or use it in the default.vue template, but that does not fit in there since conditional stylesheet is normally applied in the head tag.

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

This a typical example of what I want to try. If I can get help on how to format it so it can be used in the nuxt.config.js or in Vue component.

Solution

  • You can extend the default HTML template from Nuxt.

    Create a new file "app.html" at the root of your project and set your custom html template with .

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

    // app.html

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <!--[if IE]><link rel="stylesheet" type="text/css" href="all-ie-only.css"><![endif]-->
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>