3. Crazy geek


The original:
https://blog.logrocket.com/ge…

This article first send WeChat messages public number: front-end pioneer welcome attention, every day to you push fresh front-end technology articles

Vue.js is a popular JavaScript library for developing prototypes in a short amount of time. This includes user interfaces, front-end applications, static web pages, and native mobile applications. It is known for its easy-to-use syntax and simple data binding capabilities.

Recently, a new package has been released for the Vue.js ecosystem. It is an integration of the popular Bootstrap framework with Vue.js. This package is called Bootstrapvue. It allows us to use custom components that are integrated with Bootstrap (V4). It also supports custom Bootstrap components, grid systems, and Vue.js instructions.

In this article, we’ll cover the basics of BootstrapVue, explain general concepts, demonstrate the setup process, and use it to build a mini vue.js project that will give you more hands-on experience.

Why Bootstrapvue?

Given that Bootstrap is the most popular standalone CSS framework (in my opinion), many developers who have migrated or are interested in moving from Vanilla JavaScript frameworks to Vue.js have always found the migration a bit difficult. Because Bootstrap relies heavily on jQuery.

With Bootstrapvue, anyone can switch from Vanilla.js or jQuery to Vue.js without having to worry about Bootstrap’s heavy dependence on jQuery or even finding a workaround. This is Bootstrapvue’s rescue. It helps bridge this gap and allows Vue developers to easily use Bootstrap in their projects.

An introduction to

When using module bundles such as Webpack, Babel, etc., it is best to include these packages directly into your project. To demonstrate and provide you with a practical way to understand and use BootstrapVue, we will set up a vue.js project with BootstrapVue and build it into a functional vue.js application.

A prerequisite for

  • A basic knowledge of Vue.js will help you understand this demo
  • Install Vue CLI globally on your computer. If you have not yet installed it, follow this installation guide

Create a Vue project

Create a Vue project

First we must create a vue.js project, which we will use to demonstrate the implementation of the BootstrapVue component. Open a terminal window on the preferred directory and run the following command:

vue create bootstrapvue-demo

If you do not have the Vue CLI installed globally, please follow this installationguideDo this before continuing with the tutorial.

The above command displays a default selection dialog, as follows:

Select Default and click Enter to continue:

Now that you have created a Vue program, go to the new Vue project directory and start the development server with the following command:

cd bootstrapvue-demo
npm run serve

Your Vue application will serve on localhost:8080. Open it in a browser and you will see your own Vue application:

Add Bootstrap and BootStrapVue to the project

There are two ways to do this, either with package managers like NPM and yarn or with CDN links.

Use NPM or yarn

We’ll use NPM or yarn to install the previously mentioned packages. Depending on your preferred package manager, switch to the root of your project and run any of the following commands:

# With npm
npm install bootstrap-vue bootstrap axios

# With yarn
yarn add bootstrap-vue bootstrap axios

The above command will install the BootstrapVue and Bootstrap packages. The BootStrapVue package contains all the BootStrapVue components, while the regular Bootstrap package contains the CSS files. Axios is also installed to help us get the data we need from the ThemealDB API.

Using CDN

Use the CDN

To add Bootstrap and BootStrapVue to a Vue project via the CDN, open the index.html file in the project’s public folder and add this code to the appropriate location:

<! -- public/index.html--> <! -- Add Bootstrap and Bootstrap-Vue CSS to the <head> section --> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/> <! -- Add Vue and BootstrapVue scripts just before the closing </body> tag --> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

This will bring a smaller version and the latest version of each library into our project, very simple! But for the purposes of this article, we’ll use the package manager from the first method. Let’s go ahead and set up the BootstrapVue package.

Set the BootstrapVue

Next, let’s set up the BootstrapVue package we just installed. Go to your main.js file and add this line of code to the top:

//src/main.js
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

What we do here is very simple. We import the boostrapVue package and then register it in the program with the vue.use () function so that the Vue program can recognize it.

We also need to import the Bootstrap CSS file into the project. Add this code snippet to the main.js file:

//src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

After importing the necessary modules into your Vue program, your main.js file should look like the following code snippet:


//src/main.js
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Create the Bootstrap component

Let’s start by creating our first component, which is the Navbar component. Go to the components directory, create a file named navbar.vue, and update it with the following code:

//src/components/Navbar.vue <template> <div> <b-navbar toggleable="lg" type="dark" variant="success"> <b-container> <b-navbar-brand href="#">Mealzers</b-navbar-brand> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-collapse  id="nav-collapse" is-nav> <! -- Right aligned nav items --> <b-navbar-nav class="ml-auto"> <b-nav-form> <b-form-input size="sm" class="mr-sm-2" placeholder="Search for a meal" v-model="meal" ></b-form-input> <b-button size="sm" class="my-2 my-sm-0" type="submit" @click.prevent="getMeal" >Search</b-button> </b-nav-form> <b-nav-item-dropdown right> <! -- Using 'button-content' slot --> <template slot="button-content"><em>User</em></template> <b-dropdown-item href="#">Profile</b-dropdown-item> <b-dropdown-item href="#">Sign Out</b-dropdown-item> </b-nav-item-dropdown> </b-navbar-nav> </b-collapse> </b-container> </b-navbar> </div> </template> <script> export default { data() { return { meal: '' } }, methods: { getMeal() { ... } } } </script>

The Navbar component contains several Bootstrapvue components, one of which is the B-Navbar component. It is the parent of the other components in Navbar. Without this component, all the other components in Navbar would not render properly.

You can change the text color on the Navbar with the type attribute. The background-color of Navbar can also be changed using the variant property. These colors can be any of the normal Bootstrap default colors — info, primary, success, etc.

The other is the B-Navbar-brand component. This is where you can render your website logo. It also contains Variant and Type attributes, which can be used to change background-color and text-color, respectively.

The other BootstrapVue components are:

  • b-nav-form
  • b-nav-item-dropdown
  • b-dropdown-item
  • b-navbar-toggle
  • b-collapse
  • B-nav-item (can be disabled with the “disabled” property)
  • b-navbar-nav
  • b-nav-item.
  • More and more

One of the beauties of the BootstrapVue components is that they are reactive by default. So you don’t have to write extra code or use external libraries to make it responsive.

Another component is the Card component. The Card component allows us to display images, text, and so on in the card. Let’s call it b minus card. To demonstrate this, let’s create a cars.vue file in the components directory. Then update its contents with the following code:

//src/components/Cards.vue <template> <b-container> <div v-if="meals.length"> <b-row> <div v-bind:key="data.index" v-for="data in meals"> <b-col l="4"> <b-card v-bind:title="data.strCategory" v-bind:img-src="data.strCategoryThumb" img-alt="Image" img-top tag="article" style="max-width: 20rem;" Class = "MB - 2" > < b - card - text > {{` ${data. StrCategoryDescription. Slice (0100)}... ` }}</b-card-text> <b-button href="#" variant="primary">View food</b-button> </b-card> </b-col> </div> </b-row> </div> <div v-else> <h5>No meals available yet 😢</h5> </div> </b-container> </template> <script> import axios from "axios"; export default { data() { return { meals: [] }; }, mounted() { axios .get("https://www.themealdb.com/api/json/v1/1/categories.php") .then(response => { this.meals = response.data.categories; }) .catch(err => { console.log(err); }); }}; </script>

To render the Cards component you just created, you need to modify the HelloWorld.vue file. Open it and update with the following code:

//src/components/HelloWorld.vue <template> <div> <Cards /> </div> </template> <script> import Cards from './Cards.vue' export default { name:'cards', components: { Cards }, data() { return { }; }}; </script> <style scoped> </style> view raw

What you do here is create a Cards component and embed it in the HelloWorld.vue file. Notice that in the Cards component, there is a lifecycle hook to modify the data. The data is populated into the B-Card component before being rendered to the browser.

Next, update the app.vue file, which captures the most recent changes and renders the correct component to the browser. Open it and update it with the following code:

//App.vue
<template>
  <div id="app">
    <Navbar />
    <HelloWorld/>
  </div>
</template>
<script>
 import HelloWorld from './components/HelloWorld.vue'
  import Navbar from './components/Navbar.vue';  
  export default {
    name: 'navbar',
    components: {
      Navbar,
      HelloWorld
    }
  }
</script>

It is on the browser that you can see our catering program running as follows:

As you can see, card is not properly laid out, so this must be corrected. Fortunately, Bootstrapvue has some built-in components that can put our cards in the grid.

They are:

  • b-row
  • b-col

Modify the code in the cards. vue file to render the content in the grid using the BootstrapVue component mentioned above. Open the cars.vue file and update it with the following code snippet:

//src/components/HelloWorld.vue <template> <b-container> <div v-if="meals.length"> <b-row> <div v-bind:key="data.index" v-for="data in meals"> <b-col l="4"> <b-card v-bind:title="data.strCategory" v-bind:img-src="data.strCategoryThumb" img-alt="Image" img-top tag="article" style="max-width: 20rem;" Class = "MB - 2" > < b - card - text > {{` ${data. StrCategoryDescription. Slice (0100)}... ` }}</b-card-text> <b-button href="#" variant="primary">View food</b-button> </b-card> </b-col> </div> </b-row> </div> <div v-else> <h5>No meals available yet 😢</h5> </div> </b-container> </template> <script> import axios from "axios"; export default { data() { return { meals: [] }; }, mounted() { axios .get("https://www.themealdb.com/api/json/v1/1/categories.php") .then(response => { this.meals = response.data.categories; }) .catch(err => { console.log(err); }); }}; </script>

You should now refresh your browser and see a correctly laid out card that contains the rendering content.

Now there is a well-ordered meal program. We built all of this with some of the components of Bootstrapvue. For more information on Bootstrapvue, see the official documentation (https://bootstrap-vue.js.org/…). .

The migration

What if you want to move an existing project from regular Bootstrap4 to BootstrapVue? It will be a breeze. Here’s what you need to do:

  1. Remove from the build scriptbootstrap.jsfile
  2. Remove it from your programjQuery, Bootstrapvue can work independently
  3. Convert the native Bootstrap tag to the BootstrapVue custom component tag

That’s all! With these three steps, you can migrate your existing project from the regular jQuery-dependent Bootstrap package to the simpler stand-alone BootStrapVue package without breaking any existing code.

conclusion

This article demonstrates how to use Bootstrapvue with examples. We started with the installation, set it up in the Vue project, and finally built part of the Mealzers program using its custom components. As you can see, the BootstrapVue module is simple and easy to use. If you have knowledge of the regular Bootstrap package, using BootstrapVue will be a breeze.

This article first send WeChat messages public number: front-end pioneer

Welcome to scan the two-dimensional code to pay attention to the public number, every day to push you fresh front-end technology articles

Read on for the other great articles in this column:

  • 12 Amazing CSS Experiment Projects
  • 50 React Interview Questions You Must Know
  • What are the front-end interview questions at the world’s top companies
  • 11 of the best JavaScript dynamic effects libraries
  • CSS Flexbox Visualization Manual
  • React from a designer’s point of view
  • The holidays are boring? Write a little brain game in JavaScript!
  • How does CSS sticky positioning work
  • A step-by-step guide to implementing animations using HTML5 SVG
  • Programmer 30 years old before the monthly salary is less than 30K, which way to go
  • 14 of the best JavaScript data visualization libraries
  • 8 top VS Code extensions for the front end
  • A complete guide to Node.js multithreading
  • Convert HTML to PDF 4 solutions and implementation