Bootstrap template are not working in nuxtjs app

Question

Hello to any who read this problem. I am using in my project nuxtjs with the template of bootstrap. the header and footer are showing but the problem is that the template design in boday does not show. I added CSS and font file in the assets folder like this

I added Image and js file in the static folder

It is my nuxt.config.js file

export default {
   mode: 'universal',
  env: {

  },
  
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'algso-web',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/logo.gif' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800,900&display=swap' }
    ],
    script:[
    { src:"/js/aos.js" },
    { src:"/js/bootstrap.min.js" },
    {src: "/js/google-map.js"},
    {src: "/js/jquery-3.2.1.min.js"},
    {src: "/js/jquery-migrate-3.0.1.min.js"},
    {src: "/js/jquery.animateNumber.min.js"},
    {src: "/js/jquery.easing.1.3.js"},
    {src: "/js/jquery.magnific-popup.min.js"},
    {src: "/js/jquery.min.js"},
    {src: "/js/jquery.stellar.min.js"},
    {src: "/js/jquery.waypoints.min.js"},
    {src: "/js/main.js"},
    {src: "/js/owl.carousel.min.js"},
    {src: "/js/popper.min.js"},
    {src: "/js/scrollax.min.js"}
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/css/bootstrap/bootstrap-grid.css',
    '~/assets/css/bootstrap/bootstrap-reboot.css',
    '~/assets/css/animate.css',
    '~/assets/css/aos.css',
    '~/assets/css/bootstrap.min.css',
    '~/assets/css/flaticon.css',
    '~/assets/css/icomoon.css',
    '~/assets/css/ionicons.min.css',
    '~/assets/css/magnific-popup.css',
    '~/assets/css/open-iconic-bootstrap.min.css',
    '~/assets/css/owl.carousel.min.css',
    '~/assets/css/owl.theme.default.min.css',
    '~/assets/css/style.css'

  ],
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
   
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

the problem is that the solider and carousel are not showing and not show any design in the body of the website it is my home page design file

<template>
  <div>
    <section class="home-slider owl-carousel owl-theme">
      <div class="slider-item" style="background-image:url(/images/bg_1.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-start" data-scrollax-parent="true">
          <div class="col-md-7 ftco-animate">
            <span class="subheading">Welcome to ALGSO</span>
            <h1 class="mb-4">We Are The Best Services Provider</h1>
            <p><a href="#" class="btn  px-4 py-3 mt-3" style="background-color: #0FB1E2;"><span class="text-white">Our Services</span></a></p>
          </div>
        </div>
        </div>
      </div>

      <div class="slider-item" style="background-image:url(/images/bg_2.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-start" data-scrollax-parent="true">
          <div class="col-md-7 ftco-animate">
            <span class="subheading">Todays Talent, Tommorow Success</span>
            <h1 class="mb-4">We Help to Grow Your Business</h1>
            <p><a href="#" style="background-color: #0FB1E2;" class="btn text-white px-4 py-3 mt-3">Our Services</a></p>
          </div>
        </div>
        </div>
      </div>
    </section>
    <section class="ftco-section">
      <div class="container">
        <div class="row d-flex">
          <div class="col-md-5 order-md-last wrap-about align-items-stretch">
            <div class="wrap-about-border ftco-animate">
              <div class="img" style="background-image: url(images/about.jpg); border"></div>
              <div class="text">
                <h3>Our Mission</h3>
                <p>We believe that real development starts at the local and urban level and therefore our programs support professionals who strive to improve service delivery, support local economic development, and promote the rule of law at the local and urban level. Our mission is to be at the fore front in improving local governance and development in Afghanistan through researching, capacity building and projects design and implementation that lead to sustainable development and improved standards of living. </p>
                <p><a href="#" class="btn py-3 px-4" style="background-color: #0FB1E2;" ><span class="text-white">Contact us</span></a></p>
              </div>
            </div>
          </div>
          <div class="col-md-7 wrap-about pr-md-4 ftco-animate">
            <h2 class="mb-4">What we do ?</h2>
           <p>Afghanistan Local Governance Studies Organization is focusing on the following key areas.</p>
            <div class="row mt-5">
              <div class="col-lg-6">
                <div class="services active text-center">
                  <div class="icon mt-2 d-flex justify-content-center align-items-center"></span></div>
                  <img src="/images/Local goverment.png" width="100" height="80" alt="ALGSO">
                  <div class="text media-body">
                    <h3>Local Governance</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
                  </div>
                </div>
                <div class="services  text-center">
                  <div class="icon mt-2 d-flex justify-content-center align-items-center"></div>
                  <img src="/images//election analysis.png" width="100" height="80" alt="ALGSO">
                  <div class="text media-body">
                    <h3>Election Analysis:</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
                  </div>
                </div>

              </div>
              <div class="col-lg-6">


                <div class="services text-center">
                  <div class="icon mt-2 d-flex justify-content-center align-items-center"></div>
                  <img src="/images//reserch.png" alt="ALGSO" width="100" height="80">
                  <div class="text media-body">
                    <h3>Research</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
                  </div>
                </div>
                <div class="services text-center">
                  <div class="icon mt-2 d-flex justify-content-center align-items-center"></span></div>
                  <img width="100" height="80"  src="/images/e-gaverce.png"></img>
                  <div class="text media-body">
                    <h3>E-Governnace</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

Answer 1

One simple and clean solution would be to load BootstrapVue for Nuxt directly as shown in the documentation.

This will be less messy than importing some static code from the public directory.

yarn add bootstrap-vue

nuxt.config.js

module.exports = {
  modules: ['bootstrap-vue/nuxt']
}