انتقل إلى المحتوى الرئيسي

Create an SSR Nuxt App with Bootstrap and Bootstrap icons

Need to follow these steps.

  1. npx create-nuxt-app app_name

  2. npm i [email protected] [email protected] [email protected] [email protected]

  3. create a plugins/bootstrap.client.js and add this to it import bootsrtap from "bootstrap"

  4. create assets/scss/main.scss and ensure you have the below inside it at the top

    /* to include fonts
    @import '_fonts.scss';
    */

    @import '~bootstrap/scss/bootstrap'; /* these are the important lines for this task */
    @import "bootstrap-icons/font/bootstrap-icons.css"; /* these are the important lines for this task */

    /* if you want to override
    @import '_mixins.scss';
    @import '_variables.scss';
    */

  5. include the below in nuxt.config.js

      css: [
    '~/assets/scss/main.scss'
    ],

    plugins: [
    {
    src: '~/plugins/bootstrap.client.js'
    },
    ],

and that's it. everything should work