Skip to content

Instantly share code, notes, and snippets.

@digitalbocca
Created August 12, 2016 04:54
Show Gist options
  • Save digitalbocca/f3ff53aeba7a4218b6cbfb642dca150a to your computer and use it in GitHub Desktop.
Save digitalbocca/f3ff53aeba7a4218b6cbfb642dca150a to your computer and use it in GitHub Desktop.
Formato que funcionou perfeitamente no Webpack para usar o Jquery dentro do Vue. Tudo isso para funcionar um modal do Bootstrap em um protótipo.
/**
* Importando o JQuery e Tether para o Bootstrap 4
*
* Webpack
* VueJS
*
* Não use em produção.
*
* @author Gabriel Bertola Bocca <gabriel at estudiodigitalbocca.com.br>
* @copyright (c) 2016, Estúdio Digital Bocca
* @version v0.1
*/
import Vue from 'vue'
import App from './App'
//Dependências do bootstrap
window.jQuery = window.$ = require('jquery/dist/jquery.min')
window.Tether = require('tether/dist/js/tether.min')
//Bootstrap JS e CSS
require('bootstrap/dist/js/bootstrap.min')
require('bootstrap/dist/css/bootstrap.min.css')
/**
* OBS: Esta implementação corrigiu os seguintes erros:
*
* ReferenceError: assignment to undeclared variable jQuery
* Error: Bootstrap's JavaScript requires jQuery
* Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
*
* Entre outros como tela branca sem mostrar nenhum erro e etc...
*
* Não sei se é a melhor forma de resolver esse problema,
* mas foi a única que funcionou até agora.
*
* Se souber uma solução mais "elegante", ou souber o erro que estou cometendo: Me informe.
*
* Obrigado.
*
*/
new Vue({
el: 'body',
components: { App }
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment