Greetings to all who come across this issue. I am currently working on a project using Nuxt.js with the Bootstrap template. The header and footer are displaying correctly, but the problem lies in the design of the body not showing up.
https://i.stack.imgur.com/CjDXo.png
I have added CSS and font files in the assets folder as shown below:
https://i.stack.imgur.com/4CUgK.png
Here 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 issue is that the slider and carousel elements are not visible and the body design is missing on the home page. Below is the code snippet from my homepage 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>
.
. <!-- More HTML code goes here -->
.
</div>
<div class="slider-item" style="background-image:url(/images/bg_2.jpg);">
<div class="overlay"></div>
.
. <!-- More HTML code goes here -->
.
</div>
</section>
<section class="ftco-section">
<div class="container">
.
. <!-- More HTML code goes here -->
.
</div>
</section>
</div>
</template>