Translation: crazy technology curtilage, blog.logrocket.com/getting-sta…
Vue.js is a popular JavaScript library for developing prototypes in a short 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 software package was 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 directives.
In this article, we’ll cover the basics of BootstrapVue, explain the general concepts, demonstrate the setup process, and use it to build a mini-vue.js project to 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 moved or are thinking of moving from the Vanilla JavaScript framework to vue.js always find the migration a bit difficult, Bootstrap relies heavily on jQuery.
With BootstrapVue, anyone can switch from Vanilla. Js or jQuery to vue.js without worrying about Bootstrap being heavily dependent on jQuery or even finding a solution. That’s how BootstrapVue comes to the 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 and Babel, it is best to include them directly in 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 the Vue CLI globally on your computer. If you have not installed it yet, please follow this installation guide
Create a Vue project
Create a Vue project
We must first create a vue.js project that we will use to demonstrate the implementation of the BootstrapVue component. Open a terminal window in the preferred directory and run the following command:
vue create bootstrapvue-demo
Copy the codeIf you do not have a global installation of Vue CLI, follow this installationguideProceed with this tutorial.
The command above displays a default selection dialog box like this:
Select Default and press Enter to continue:
Now that you have created a Vue program, go to the new Vue project directory and start the development server using the following command:
cd bootstrapvue-demo
npm run serve
Copy the codeYour Vue application will be serviced on localhost:8080. Open it in a browser and you’ll see your own Vue application:
Add Bootstrap and BootstrapVue to the project
There are two ways to do this: you can use package managers like NPM and YARN or you can use CDN links.
Use NPM or YARN
We will install the previously mentioned packages using EITHER NPM or YARN. Switch to the root of your project and run any of the following commands, depending on your preferred package manager:
# With npm
npm install bootstrap-vue bootstrap axios
# With yarn
yarn add bootstrap-vue bootstrap axios
Copy the codeThe command above will install BootstrapVue and Bootstrap package **. ** The BoostrapVue package contains all BootstrapVue components. Regular Bootstrap contains CSS files. Axios was also installed to help us get the data needed for the program from the ThemealDB API.
Using CDN
** Uses CDN **
To add Bootstrap and BootstrapVue to a Vue project via 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>
Copy the codeThis will introduce a smaller and more recent 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. Next, 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 to the top:
//src/main.js
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
Copy the codeWhat we do here is very simple. We import the BoostrapVue package and 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 snippet to the main.js file:
//src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Copy the codeAfter importing the necessary modules into the Vue program, your main.js file should look like this:
//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')
Copy the codeCreate the Bootstrap component
Let’s start creating our first component. The first component is the Navbar component **. ** Go to the components directory, create a file called 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>
Copy the codeThe Navbar component contains several BootstrapVue components, one of which is the B-Navbar component. It is the parent of other components in the Navbar. Without this component, all other components in the Navbar will not render correctly.
You can change the color of the text 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 normal Bootstrap default color — info, Primary, SUCCESS, and so on.
The other is the B-Navbar-brand component **. ** This is where the site logo can be displayed. It also contains variant and Type attributes, which can be used to change background-color and text-color, respectively.
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” attribute)
- b-navbar-nav
- b-nav-item.
- More and more
One of the beauties of 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.
The other component is the Card component. The Card component allows us to display images, text, and so on in the card. It’s called b card star star. To demonstrate it, let’s create a cards.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>
Copy the codeTo render the Cards component you just created, you need to modify the helloWorld.vue file. Open it and update it 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 rawCopy the codeWhat you do here is create a Cards component and embed it in the helloWorld.vue file **. ** Note that in the Cards component, there is a lifecycle hook to modify data. The data is populated into the B-card component before being rendered to the browser.
Next, update the app.vue file to capture the most recent changes and render the correct components 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>
Copy the codeThis is on the browser you can see our catering program running as follows:
As you can see, the card is not laid out correctly, so this must be corrected. Fortunately, BootstrapVue has some built-in components to put our card 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 cards.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>
Copy the codeNow refresh your browser and you should see a properly laid out card with rendered content.
There is now an orderly catering process. We built all of this with some BootstrapVue components. To learn more about BootstrapVue, check out the official documentation (bootstrap-vue.js.org/docs/).
The migration
What if you want to migrate an existing project from regular Bootstrap4 to BootstrapVue? It will be a piece of cake. Here’s what you need to do:
- Removed from the build script
bootstrap.jsfile - Delete it from your program
jQueryBootstrapVue can work independently - Convert native Bootstrap tags to BootstrapVue custom component tags
That’s it! With these three steps, you can migrate your existing projects from regular Bootstrap that relies on jQuery to a simpler standalone BootstrapVue package without breaking any existing code.
conclusion
This article demonstrates how to use BootstrapVue with examples. We started with 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. Using BootstrapVue is a breeze if you have knowledge of regular Bootstrap packages.
Welcome to pay attention to front-end public number: front-end pioneer, get more front-end dry goods.
