Como incluir Bootstrap-Vue no Laravel

5
Santanu Biswas 2019-04-30 20:47.

Como posso instalar / importar / incluir Bootstrap Vue em meu laravelprojeto? Sou novo no Vue, sei instalar em um Vue JSaplicativo, mas como posso adicioná-lo 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

13
Karan Sadana 2019-04-30 21:11.

Você pode fazer isso simplesmente por nó e npm. instale o nó em seu sistema. e, em seguida, abra o terminal a partir do diretório raiz do projeto como você faz com o laravel para executar comandos artisan.

quando você abre o terminal. simplesmente corra

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

Aqui não estou instalando vue .beacuse ele já está instalado em laravel se você verificar seu arquivo app.js, dentro do seu resourcesdiretório e depois de instalar com sucesso isso, você pode importar este em seus app.js por

import BootstrapVue from 'bootstrap-vue' //Importing

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

Para css, você pode importar isso simplesmente

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

em app.scss

Depois que toda a configuração da configuração for executada

npm run dev // herewebpack faz seu trabalho

ou se você estiver em produção, você pode fazer isso

npm run production

2
Manu 2019-04-30 21:10.

Basta executar npm i vue bootstrap-vue bootstrapdentro da pasta onde você tem o package.json ou alterar manualmente o package.json. Então você tem que adicionar em./resources/assets/js/bootstrap.js 

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

Vue.use(BootstrapVue)
0
Andrea Mauro 2019-10-07 03:33.

Instale seu pacote com

npm install bootstrap-vue

ou

yarn add bootstrap-vue

Então você pode incluir globalmente sua biblioteca adicionando esta linha em seus recursos \ js \ app.js apóswindow.Vue = require('vue');

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

Você pode dar uma olhada na documentação oficial do Vue para instalação de plug-ins

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

Related questions

MORE COOL STUFF

Jana Duggar: tudo o que ela disse sobre o amor e sua janela de 5 anos para encontrar o 'escolhido'

Jana Duggar: tudo o que ela disse sobre o amor e sua janela de 5 anos para encontrar o 'escolhido'

Jana Duggar foi aberta sobre sua busca pelo amor. Aqui está tudo o que ela disse sobre o assunto e sua janela de cinco anos para o casamento.

2023-06-12.

Sam Heughan sabe exatamente o que vai tirar do set de 'Outlander' - 'Eu me sinto como Jamie quando os coloco'

Sam Heughan sabe exatamente o que vai tirar do set de 'Outlander' - 'Eu me sinto como Jamie quando os coloco'

O astro de 'Outlander', Sam Heughan, revelou recentemente o que vai levar do set para relembrar Jamie Fraser, o papel que o tornou uma estrela.

2023-06-12.

A música dos primeiros Beatles que foi uma das 'apresentações mais emocionantes' da banda, de acordo com um Fab Four Insider

A música dos primeiros Beatles que foi uma das 'apresentações mais emocionantes' da banda, de acordo com um Fab Four Insider

'She Loves You' foi escrita em uma hora, gravada em um dia, e foi a música dos Beatles com uma de suas melhores apresentações de sua carreira.

2023-06-11.

Dolly Parton ajudou sua avó 'inválida' quando nenhum dos outros netos o faria - ela também pregaria uma peça nela

Dolly Parton ajudou sua avó 'inválida' quando nenhum dos outros netos o faria - ela também pregaria uma peça nela

Dolly Parton e sua avó Bessie tiveram um relacionamento especial. Vovó Parton estava muito doente, mas isso não impediu Dolly de pregar uma peça nela.

2023-06-11.

Qual é a madeira mais dura do mundo?

Qual é a madeira mais dura do mundo?

Você pode achar que o carvalho ou a nogueira são madeiras resistentes, mas quando se trata da madeira mais dura do mundo, elas nem chegam perto.

2025-10-29.

10 das criaturas marinhas mais assustadoras que espreitam nas profundezas do oceano

10 das criaturas marinhas mais assustadoras que espreitam nas profundezas do oceano

O oceano é repleto de beleza, mas também esconde algumas das criaturas marinhas mais assustadoras do planeta. Muitos desses animais espreitam nas profundezas do oceano, no mundo escuro e de alta pressão do fundo do mar.

2025-10-29.

10 Melhores Encantamentos de Espada no Minecraft

10 Melhores Encantamentos de Espada no Minecraft

Se você está enfrentando criaturas hostis ou se preparando para cenários PvP, conhecer os melhores encantamentos de espada no Minecraft pode te dar uma grande vantagem. Encantar espadas permite causar mais dano, aumentar a quantidade de itens obtidos de criaturas e prolongar a durabilidade da sua espada.

2025-10-29.

13 países socialistas muito diferentes entre si

13 países socialistas muito diferentes entre si

Quando as pessoas falam sobre países socialistas, geralmente imaginam o controle total do governo e a ausência de propriedade privada. Mas, na prática, as economias socialistas variam muito.

2025-10-29.

Recapitulação do Urso: Marcus é o homem mais gentil, gentil e sincero de Chicago?

Recapitulação do Urso: Marcus é o homem mais gentil, gentil e sincero de Chicago?

“Children” traz uma participação especial de grande nome e algumas notícias devastadoras

2024-07-03 19:12.

Por US $ 9.800, você os colocaria neste Toyota RAV4 2008 de sete lugares?

Por US $ 9.800, você os colocaria neste Toyota RAV4 2008 de sete lugares?

Este RAV4 está em excelentes condições e está preparado para um jogo de cadeiras musicais.

2024-07-03 19:04.

Van de entrega da Amazon pega fogo em explosão de fogo durante o calor do verão em Houston

Van de entrega da Amazon pega fogo em explosão de fogo durante o calor do verão em Houston

Imagens de drone capturaram bombeiros parecendo lutar para apagar o incêndio.

2024-07-03 19:04.

O programa dos Panteras Negras da Marvel será o programa de animação mais importante até agora

O programa dos Panteras Negras da Marvel será o programa de animação mais importante até agora

Eyes of Wakanda está diretamente relacionado ao MCU, além de atualizações sobre X-Men '97, What If..., Demolidor e muito mais.

2024-07-03 19:03.

Tudo sobre o deslumbrante anel de noivado de safira de Kate Middleton (e a herança real que o inspirou!)

Tudo sobre o deslumbrante anel de noivado de safira de Kate Middleton (e a herança real que o inspirou!)

O anel de noivado de Kate Middleton pertenceu à Princesa Diana antes do Príncipe William pedi-la em casamento. Descubra tudo o que há para saber sobre a peça histórica aqui.

2024-09-01.

Quem é a esposa de John Cleese? Tudo sobre Jennifer Wade

Quem é a esposa de John Cleese? Tudo sobre Jennifer Wade

John Cleese se casou com sua esposa, Jennifer Wade, em 2012. Aqui está tudo o que você precisa saber sobre a esposa de John Cleese, Jennifer Wade.

2024-06-16.

Quem é a esposa de Patton Oswalt? Tudo sobre Meredith Salenger

Quem é a esposa de Patton Oswalt? Tudo sobre Meredith Salenger

Patton Oswalt se casou com sua esposa, a também atriz Meredith Salenger, em 2017. Aqui está tudo o que você precisa saber sobre a esposa de Patton Oswalt, Meredith Salenger.

2024-06-16.

Quem é o marido de Mena Suvari? Tudo sobre Michael Hope

Quem é o marido de Mena Suvari? Tudo sobre Michael Hope

Mena Suvari é casada com o marido Michael Hope desde 2018. Aqui está tudo o que você precisa saber sobre o marido de Mena Suvari.

2023-11-05.

pronomes são super assustadores

Isso me atinge De repente, como tantas vezes acontece É o meio do caminho tudo de novo <Não, não aquele no Pacífico, seu marrom, aquele no carnaval> Todas as manchetes em voz alta…..

3 maneiras comprovadas de melhorar sua habilidade de escrita

Os benefícios de escrever e estratégias para ajudá-lo a fazê-lo

3 maneiras comprovadas de melhorar sua habilidade de escrita

Em 2022, com o lançamento do GPT-3, a habilidade de escrita parece se tornar menos importante. Com a IA, pessoas com redação ruim também podem gerar funcionários de qualidade.

A lenta erosão: revelando como as pessoas desperdiçam em suas carreiras

A lenta erosão: revelando como as pessoas desperdiçam em suas carreiras

No mundo acelerado e competitivo de hoje, a carreira desempenha um papel significativo no crescimento pessoal, na estabilidade financeira e na satisfação geral com a vida. No entanto, muitos indivíduos encontram-se presos em um ciclo implacável de estagnação e insatisfação, definhando gradualmente em suas vidas profissionais.

O que torna um podcast influente?

O que torna um podcast influente?

Na semana passada, notei um comunicado de imprensa, enviado via PressGazette (um site de notícias da mídia britânica). O artigo anunciava que a Acast, a empresa de publicidade e hospedagem de podcast Scandi, lideraria um consórcio de "provavelmente os editores mais influentes" em podcasting.

Language

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