Nuxt.js : How to set multiple CSS on multiple layouts in Nuxt.js

Mungkin teman-teman ada yang masih bingung, bagaimana caranya mengatur file-file CSS pada layouts yang berbeda di dalam Nuxt.js ?

Berikut ini cara yang bisa teman-teman coba.

Terima Kasih.

Dilihat sebanyak 4.721 kali

Vue JS Nuxt Js

SOLUTIONS

Berikut ini adalah beberapa solusi yang mungkin bisa membantu kamu.

SOLUTION : 1

Teman-teman bisa memanggil CSS-nya pada masing-masing layout yang digunakan, contohnya seperti berikut ini.

Layout A:

export default {
  name: 'LayoutA',
  head() {
    return {
      link: [
        { rel: 'stylesheet', href: '/css/LayoutA/app.min.css' }
      ],
      bodyAttrs: {
        class: 'LayoutA'
      }
    }
  }
}
</script>

Layout B:

export default {
  name: 'LayoutB',
  head() {
    return {
      link: [
        { rel: 'stylesheet', href: '/css/LayoutB/app.min.css' }
      ],
      bodyAttrs: {
        class: 'LayoutB'
      }
    }
  }
}
</script>

Terima Kasih