2

Olá pessoal da Stackoverflow,

Estou com um projeto VueJS já com Webpack. E fui importar as bibliotecas JQuery e Bootstrap. Fui no meu node e usei os comandos

npm install jquery --save-dev
npm install bootstrap --save-dev

Ok, fui na minha página main Main.vue

window.$ = window.jQuery = require('jquery');

Fui em um Template Filho ( Footer.vue ) e testei um alert

$('document').ready(function(){ alert('JQuery Worked!') });

Funcionou perfeitamente. Tentei então importar no mesmo lugar o Bootstrap após o Jquery:

window.$ = window.jQuery = require('jquery');
import 'boostrap'

e o console me retorna: Bootstrap's JavaScript requires jQuery

Porque o bootstrap não encontra o Jquery sendo que testei o Jquery antes de importar o bootstrap?

Obrigado!

6
  • 1
    Não uses jQuery e Vue. Se queres usar Vue + Bootstrap podes usar o bootstrap-vue.js.org
    – Sergio
    Commented 20/09/2017 às 14:03
  • Hmm porque não posso usar jquery e bootstrap com o vuejs?
    – Jackson
    Commented 20/09/2017 às 14:08
  • Podes, mas não deves, são maneiras de programar e gerir o estado da aplicação muito diferentes. E se é um projeto novo então é mesmo hora de deixar o jQuery. Relacionado: pt.stackoverflow.com/q/234059/129
    – Sergio
    Commented 20/09/2017 às 14:12
  • Então, é que não é um projeto novo. Estou migrando um projeto já existente para o VueJS. E neste projeto eu uso muito o JQuery Datatable... Fica ruim de eu abandonar o jquery assim
    – Jackson
    Commented 20/09/2017 às 14:13
  • Compreendo. Tenta adaptar para vue datatables, há alguns para escolher. Se tem mesmo que ser, junta o jQuery, mas se não for muito esforço era melhor tirar.
    – Sergio
    Commented 20/09/2017 às 14:17

1 Resposta 1

1

Junta o plugin do jQuery no webpack para ele estar disponivel na aplicação:

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

E quando instalas o jQuery e bootsrap deves ter a flag --save e não --save-dev pois são dependências de produção.

3
  • Abri meu Webpack.config e nele não tem plugins, mas tem isso aqui: " module.exports.plugins = (module.exports.plugins || []).concat([ <- CODE -> ]) . Tentei colocar dentro do 'Code', compilei de novo e o erro continua =/
    – Jackson
    Commented 20/09/2017 às 14:22
  • 1
    @Jackson tens esse projeto online? tipo no github ou numa pasta zipada?
    – Sergio
    Commented 20/09/2017 às 14:23
  • 1
    Consegui aqui, eu coloquei como último parâmetro do module.exports e funcionou! Obrigado =)
    – Jackson
    Commented 20/09/2017 às 14:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .