Intégrer Bootstrap 4 à une application Vue.js

Étant donné que je n’ai rien trouvé de très clair à ce sujet et qu’il a fallu que je tâtonne un peu, voici un tutoriel expliquant de quelle manière on peut intégrer Bootstrap 4 à une application vue.js, dans sa version scss ce qui permet une personnalisation poussée, et avec tous les composants Bootstrap fonctionnels sous forme de composants vue.js, et ce sans avoir besoin d’importer JQuery (donc pas de risque de bizarreries d'interférences avec le DOM virtuel).

Nous démarrerons à partir du squelette d’une application créé avec vue-cli avec le template webpack. Nous l’appellerons bs4 :

$ vue init webpack bs4

Une fois rendu dans le dossier de l’application et les dépendances installées, commençons par installer Bootstrap 4 :

$ npm install --save-dev bootstrap@4.0.0-beta

Puis installons quelques dépendances qui serviront à webpack pour construire à partir de ce que nous allons entrer :

$ npm install --save-dev node-sass sass-loader style-loader

Nous allons maintenant créer un fichier custom.scss, dans assets, qui va nous permettre de personnaliser Bootstrap. Pour savoir quelles variables on peut redéfinir, on peut regarder dans le fichier node_modules/bootstrap/scss/_variables.scss : tout ce qui s’y trouve peut être redéfini. On va par exemple ici redéfinir la police de caractères par défaut de Bootstrap :

src/assets/custom.scss

@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed'); $font-family-sans-serif: 'Encode Sans Condensed', sans-serif;

Nous allons maintenant importer tout cela dans l’application, au niveau de son composant d’entrée App.vue, dans la balise *style *:

<style lang="scss">
  @import "./assets/custom.scss";
  @import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

Il y a deux choses importantes : ne pas oublier d’indiquer lang= »scss » dans la balise style, et importer le fichier custom.scss avant d’importer Bootstrap. Cela tient à la manière dont les variables sont définies dans Bootstrap, avec l’utilisation d’un marqueur !default qui fait que chaque variable n’est redéfinie que si elle n’a pas été préalablement définie.

On dispose alors dès maintenant de toutes les classes Bootstrap de manière globale dans toute l’application, tenant compte des personnalisations effectuées dans custom.scss.

On n’a pas encore par contre, à ce stade, les composants JavaScript de Bootstrap. Tel quels, ces derniers, si on les importait, nécessitent en effet JQuery pour fonctionner. Or, sauf pour un autre besoin, il n’y a aucun intérêt à importer JQuery juste pour cela dans une application vue.

Heureusement, 5 développeurs ont entièrement réécrit tout le code des composants Bootstrap 4 pour une utilisation directe sous forme de composants vue.js 2 : https://github.com/bootstrap-vue/bootstrap-vue, cela étant disponible sous npm, donc facile à installer :

$ npm install –save-dev bootstrap-vue

Il n’y a alors plus qu’à déclarer le plugin et importer quelques css additionnels dans le fichier JavaScript d’entrée main.js :

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

On remarquera ici l’importation du css directement dans main.js : ceci est possible grâce au plugin webpack style-loader que nous avons installé plus haut. Nous ne le faisons pas pour importer Bootstrap car pour une raison que je n’ai pas encore bien comprise, dans ce cas nos personnalisations dans custom.scss ne fonctionnent pas.

Redéfinissons notre composant d’entrée App.vue pour utiliser ces nouvelles fonctionnalités et voir le résultat. Ici, nous utilisons les composants <b-btn>, <b-collapse> et <b-card>, qui font respectivement un bouton, un « collapse » qui réagit au clic sur le bouton, et une carte Bootstrap. Il y a un second collapse intégré dans le premier pour montrer que l’on peut imbriquer les éléments comme on le veut :

src/App.vue

<template>
  <div id="app" class="container">
    <br />
    <h1>Intégration bootstrap</h1>
    <br />
    <p>
      <b-btn v-b-toggle.collapse1 variant="warning">Toggle Collapse</b-btn>
    </p>
    <b-collapse id="collapse1">
      <b-card>
        Collapse contents Here
        <b-btn v-b-toggle.collapse2 size="sm">Toggle Inner Collapse</b-btn>
        <b-collapse id=collapse2 class="mt-2">
          <b-card>Hello!</b-card>
        </b-collapse>
      </b-card>
    </b-collapse>
  </div>
</template>

<script>
  export default {
    name: 'app',
  }
</script>

<style lang="scss">
  @import "./assets/custom.scss";
  @import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

Cet exemple est issu de la documentation Bootstrap-Vue. Vous y trouverez comment utiliser tous les composants disponibles.

Lancer le serveur de développement (npm run dev) et rendez-vous sur localhost:8080, et vérifiez que tout fonctionne !

essai-bs4-3

Voilà, tout cela n’est pas très compliqué. Ne reste plus qu’à apprendre à utiliser tous les composants Bootstrap-Vue et apprendre à personnaliser Bootstrap au travers de ses variables.

J’espère que ce petit tuto vous aura été utile. N’hésitez pas à me contacter ou à poser vos questions via les commentaires, je me ferais un plaisir d’y répondre.