Nuxt.js + Bootstrap v5

Nuxt.js + Bootstrap v5 guide for Trezo.

Overview

Trezo built on the powerful combination of Nuxt.js and Bootstrap v5, this project offers a fast, SEO-friendly, and fully responsive solution for modern web applications. Leveraging Nuxt.js’s server-side rendering capabilities ensures optimal performance and seamless navigation, while Bootstrap v5 provides a flexible and robust design system with extensive customization options. The project emphasizes modularity and component-driven development, enabling scalable and maintainable code. With pre-built components, utility classes, and a mobile-first design philosophy, the application is crafted to deliver a streamlined and engaging user experience across devices.

Using Nuxt.js and Bootstrap v5:

  • SEO Optimization: Built with server-side rendering (SSR) in Nuxt.js, ensuring enhanced SEO and fast load times.
  • Fully Responsive Design: Leverages Bootstrap 5’s mobile-first approach for optimal display across all devices.
  • Pre-built Components: Access to Bootstrap’s extensive library of components for rapid development.
  • Customizable Themes: Easily adaptable styles with Bootstrap’s SCSS variables and Nuxt.js support for modular styling.
  • Optimized Performance: Server-side rendering and code-splitting ensure a smooth and efficient user experience.
  • Modular Architecture: Component-driven structure in Nuxt.js promotes clean, maintainable, and scalable code.
  • Enhanced UI Elements: Modern Bootstrap 5 utilities like responsive grid, typography, and icons for polished aesthetics.
  • Dynamic Routing & Navigation: Nuxt.js dynamic routing simplifies multi-page applications with smooth transitions.
  • SSR and SSG Capabilities: Options for both Server-Side Rendering (SSR) and Static Site Generation (SSG) for flexibility in deployment.
  • Flexible Utility Classes: Bootstrap 5’s updated utility classes allow for quicker styling adjustments.

What is Nuxt?

  • Nuxt.js is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.
  • We made everything so you can start writing .vue files from the beginning while enjoying hot module replacement in development and a performant application in production with server-side rendering by default.
  • Nuxt.js has no vendor lock-in, allowing you to deploy your application everywhere, even on the edge.
  • Introduction from Nuxt.js official doc
  • Nuxt (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Nuxt is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Nuxt is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
  • If you want to more comfortable with Nuxt Js please visit this Tutorial

Local Development Environment Setup

In order to kickstart the development of your web app with Trezo, the very first thing is to setup an Nuxt.js development environment.

Node.js & npm

  • Node.js and NPM: If NodeJS is not installed then download it from https://nodejs.org/ Google Fonts. NPM comes bundled with Node.js
  • Now check the version if everything is installed nicely like open the terminal/bash/command prompt and run node -v npm -v if you get any number then everything is just fine.

Open the terminal and run the command npm install -g @vue/cli. To get more help on the Vue.js CLI check out the Vue.js CLI Guide.

NPM Packages

  • Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

Development Server

  • Run npm run dev for a dev server. Navigate to http://localhost:3000/. The app will autometically reload if you change any of the source files.

Building

  • Run npm run build to build the project.

Pages Info

All Pages

image

Pages Components

image

All Pages components are there & based on the pages name you will find the components folders inside components.

Dependencies

Here are the dependencies list which being used in the Trezo Nuxt.js Template:

package.json

"dependencies": {
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@fullcalendar/vue3": "^6.1.15",
    "@mdi/font": "^7.4.47",
    "@types/bootstrap": "^5.2.10",
    "@vueup/vue-quill": "^1.2.0",
    "apexcharts": "^3.54.0",
    "feather-icons": "^4.29.2",
    "nuxt": "^3.13.0",
    "nuxt-feather-icons": "^1.2.4",
    "nuxt-swiper": "^1.2.2",
    "prismjs": "^1.29.0",
    "quill": "^2.0.2",
    "vue": "^3.5.10",
    "vue-router": "^4.4.5",
    "vue3-apexcharts": "^1.6.0"
},
"devDependencies": {
    "@bootstrap-vue-next/nuxt": "^0.24.23",
    "bootstrap": "^5.3.3",
    "bootstrap-vue-next": "^0.24.23",
    "sass": "^1.79.4",
    "sass-loader": "^16.0.2"
}

Fonts Used

By default, the template loads Inter font from Fontshare Web Font Services. The font can be changed based on the website needs. Google Fonts

You will find the font code in the "style.scss file: src/assets/scss/style.scss

**
- Default CSS
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");

/* You can add global styles to this file, and also import other style files */
:root {
    --fontFamily: "Inter", sans-serif;
    --blackColor: #3a4252;
    --whiteColor: #ffffff;
    --bodyColor: #64748b;
    --borderColor: #eceef2;
    --transition: 0.5s;
    --fontSize: 14px;
    --primaryColor: #605dff;
    --secondaryColor: #3584fc;
    --successColor: #25b003;
    --dangerColor: #ff4023;
    --warningColor: #ffc107;
    --infoColor: #0dcaf0;
    --lightColor: #f8f9fa;
    --darkColor: #212529;
    --purpleColor: #ad63f6;
    --orangeColor: #fd5812;
    --orangeColor: #fd5812;
}
*,
::after,
::before {
    box-sizing: border-box;
}
body {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bodyColor);
    background-color: #f6f7f9;
    font: {
        size: var(--fontSize);
        family: var(--fontFamily) !important;
    }
}

How to Run The SCSS File

Please open the file Visual Studio Code Editor. And follow the video tutorial.

Here the Link: Watch this video on YouTube

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images

Google Fonts

IconFont

Packages

Installation Video

To help you understand the installation process better, please watch the following video tutorial. It provides a step-by-step guide on setting up the application:

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team if you have any questions!