Comment inclure Bootstrap-Vue dans Laravel

Santanu Biswas 2019-04-30 20:47.

Comment puis-je installer / importer / inclure Bootstrap Vue dans mon laravelprojet? Je suis nouveau dans Vue, je sais comment installer dans une Vue JSapplication, mais comment puis-je l'ajouter laravel?

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap-vue/src/index.scss";

.navbar-laravel {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

app.js

    /**
     * First we will load all of this project's JavaScript dependencies which
     * includes Vue and other libraries. It is a great starting point when
     * building robust, powerful web applications using Vue and Laravel.
     */

    require("./bootstrap")

    window.Vue = require("vue")

    import BootstrapVue from "bootstrap-vue" //Importing

    Vue.use(BootstrapVue) // Teslling Vue to use this whole application

    /**
    * The following block of code may be used to automatically register your
    * Vue components. It will recursively scan this directory for the Vue
    * components and automatically register them with their "basename".
    *
    * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
    */

    // const files = require.context('./', true, /\.vue$/i);
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

    Vue.component(
        "example-component",
        require("./components/ExampleComponent.vue").default
    )

    /**
    * Next, we will create a fresh Vue application instance and attach it to
    * the page. Then, you may begin adding components to this application
    * or customize the JavaScript scaffolding to fit your unique needs.
    */

    const app = new Vue({
        el: "#app"
    })

laravel vue.js bootstrap-vue

3 answers

Karan Sadana 2019-04-30 21:11.

Vous pouvez le faire simplement par nœud et npm. installez le nœud dans votre système. puis ouvrez le terminal à partir du répertoire racine de votre projet comme vous le faites avec laravel pour exécuter des commandes artisanales.

lorsque vous ouvrez le terminal. courir simplement

npm i bootstrap-vue // you can also give save falg to save in package.json file

Ici, je n'installe pas vue .beacuse, il est déjà installé dans laravel si vous vérifiez votre fichier app.js, dans votre resourcesrépertoire et après l'avoir installé avec succès, vous pouvez l'importer dans votre app.js par

import BootstrapVue from 'bootstrap-vue' //Importing

Vue.use(BootstrapVue) // Telling Vue to use this in whole application

Pour css, vous pouvez importer ceci simplement

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

dans app.scss

Une fois toutes les configurations de configuration exécutées

npm run dev // herewebpack fait son travail

ou si vous êtes en production, vous pouvez le faire en

npm run production

Manu 2019-04-30 21:10.

Exécutez simplement le npm i vue bootstrap-vue bootstrapdossier dans lequel vous avez package.json ou modifiez manuellement package.json. Ensuite, vous devez ajouter à./resources/assets/js/bootstrap.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

Andrea Mauro 2019-10-07 03:33.

Installez votre package avec

npm install bootstrap-vue

yarn add bootstrap-vue

Ensuite, vous pouvez inclure globalement votre bibliothèque en ajoutant cette ligne dans vos ressources \ js \ app.js aprèswindow.Vue = require('vue');

Vue.use(require('bootstrap-vue'));

Vous pouvez consulter la documentation officielle de Vue pour l'installation des plugins

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar : Tout ce qu'elle a dit sur l'amour et sa fenêtre de 5 ans pour trouver le « bon »

Jana Duggar a été ouverte sur sa recherche de l'amour. Voici tout ce qu'elle a dit sur le sujet et sa fenêtre de mariage de cinq ans.

2023-06-12.

Sam Heughan sait exactement ce qu'il retirera de l'ensemble "Outlander" - "J'ai l'impression d'être Jamie quand je les mets"

La star d'Outlander, Sam Heughan, a récemment révélé ce qu'il retirera du tournage pour se souvenir de Jamie Fraser, le rôle qui a fait de lui une star.

2023-06-12.

La première chanson des Beatles qui était l'une des " performances les plus excitantes " du groupe, selon un initié de Fab Four

"She Loves You" a été écrite en une heure, enregistrée en une journée, et a été la chanson des Beatles avec l'une de leurs meilleures performances de leur carrière.

2023-06-11.

Dolly Parton a aidé sa grand-mère "invalide" alors qu'aucun des autres petits-enfants ne le ferait - elle lui faisait aussi des blagues

Dolly Parton et sa grand-mère Bessie avaient une relation spéciale. Grand-mère Parton était très malade, mais cela n'a pas empêché Dolly de lui faire des farces.

2023-06-11.

10 des créatures marines les plus terrifiantes qui rôdent dans les profondeurs de l'océan

L'océan regorge de beauté, mais il abrite aussi certaines des créatures marines les plus terrifiantes de la planète. Nombre de ces animaux vivent dans les profondeurs obscures et sous haute pression des abysses.

2025-10-29.

Les 10 meilleurs enchantements d'épée dans Minecraft

Que vous affrontiez des créatures hostiles ou vous prépariez pour des affrontements PvP, connaître les meilleurs enchantements d'épée dans Minecraft peut vous donner un avantage considérable. Enchanter vos épées vous permet d'infliger plus de dégâts, d'augmenter le butin des créatures et d'accroître leur durabilité.

2025-10-29.

13 pays socialistes qui sont très différents les uns des autres

Quand on parle de pays socialistes, on imagine souvent un contrôle total de l'État et l'absence de propriété privée. Mais en réalité, les économies socialistes sont très diverses.

2025-10-29.

Récapitulatif de The Bear : Marcus est-il l'homme le plus gentil, le plus doux et le plus sincère de Chicago ?

« Enfants » laisse tomber un caméo de grand nom et des nouvelles dévastatrices

2024-07-03 19:12.

Une camionnette de livraison Amazon s'enflamme dans une explosion ardente pendant la chaleur estivale de Houston

Des images de drones ont montré des pompiers semblant lutter pour éteindre l'incendie.

2024-07-03 19:04.

Le spectacle Black Panther de Marvel sera le spectacle d'animation le plus crucial à ce jour

Eyes of Wakanda est directement lié au MCU, ainsi que des mises à jour sur X-Men '97, What If..., Daredevil, et plus encore.

2024-07-03 19:03.

L'histoire de rencontres d'Ava Gardner : retour sur les mariages et les romances de l'icône hollywoodienne

Ava Gardner a été mariée à Mickey Rooney et Frank Sintra, et a fréquenté plusieurs autres stars d'Hollywood. Voici un aperçu de l'histoire amoureuse d'Ava Gardner.

2024-06-23.

3 façons éprouvées d'améliorer vos compétences en écriture

Les avantages de l'écriture et les stratégies pour vous aider à le faire

En 2022, avec la sortie de GPT-3, la compétence en écriture semble devenir moins importante. Avec l'IA, les personnes ayant une mauvaise écriture peuvent également générer du personnel de qualité.

L'érosion lente : dévoiler les façons dont les gens perdent leur carrière

Dans le monde rapide et compétitif d'aujourd'hui, la carrière d'une personne joue un rôle important dans la croissance personnelle, la stabilité financière et la satisfaction globale de la vie. Cependant, de nombreuses personnes se retrouvent prises dans un cycle incessant de stagnation et d'insatisfaction, dépérissant progressivement dans leur vie professionnelle.

Qu'est-ce qui rend un podcast influent ?

La semaine dernière, j'ai remarqué un communiqué de presse, envoyé via PressGazette (un site Web d'information britannique). L'article annonçait qu'Acast, la société d'hébergement et de publicité de podcasts de Scandi, dirigerait un consortium d'éditeurs "probablement les plus influents" du podcasting.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

Comment inclure Bootstrap-Vue dans Laravel

3 answers

Related questions

MORE COOL STUFF

Jana Duggar : Tout ce qu'elle a dit sur l'amour et sa fenêtre de 5 ans pour trouver le « bon »

Sam Heughan sait exactement ce qu'il retirera de l'ensemble "Outlander" - "J'ai l'impression d'être Jamie quand je les mets"

La première chanson des Beatles qui était l'une des " performances les plus excitantes " du groupe, selon un initié de Fab Four

Dolly Parton a aidé sa grand-mère "invalide" alors qu'aucun des autres petits-enfants ne le ferait - elle lui faisait aussi des blagues

Quel est le bois le plus dur au monde ?

10 des créatures marines les plus terrifiantes qui rôdent dans les profondeurs de l'océan

Les 10 meilleurs enchantements d'épée dans Minecraft

13 pays socialistes qui sont très différents les uns des autres

Récapitulatif de The Bear : Marcus est-il l'homme le plus gentil, le plus doux et le plus sincère de Chicago ?

À 9 800 $, voudriez-vous les emballer dans ce Toyota RAV4 2008 à sept places ?

Une camionnette de livraison Amazon s'enflamme dans une explosion ardente pendant la chaleur estivale de Houston

Le spectacle Black Panther de Marvel sera le spectacle d'animation le plus crucial à ce jour

L'histoire de rencontres d'Ava Gardner : retour sur les mariages et les romances de l'icône hollywoodienne

Qui est la femme de John Cleese ? Tout sur Jennifer Wade

Qui est la femme de Craig Melvin ? Tout sur la journaliste sportive Lindsay Czarniak

Chronologie de la relation entre Maggie Gyllenhaal et Peter Sarsgaard

les pronoms font super peur

3 façons éprouvées d'améliorer vos compétences en écriture

Les avantages de l'écriture et les stratégies pour vous aider à le faire

L'érosion lente : dévoiler les façons dont les gens perdent leur carrière

Qu'est-ce qui rend un podcast influent ?

Language