0

Estou seguindo vários tutoriais como podem ver abaixo;

Aos 9 minutos e 45 segundos de vídeo.

Utilização do Vue.js em uma aplicação Laravel

Aos 8 minutos e 12 segundos do vídeo.

1 - CRUD en LARAVEL & VUEjs - Webpack, Laravel Mix, NPM, Axios | Rimorsoft Online

Aos 4 minutos 36 segundos de vídeo

CRUD with Vue JS

Eu sei que tem como configurar direto na pagina os arquivos de vuejs e bootstrap, mas eu gostaria de configurar no arquivo webpack.mix.js o css e o Javascript, pois configurando no webpack.mix.js vai ficar configurado para o projeto todo;

Eu tentei dessa forma, mas não deu certo, eu tentei pelos tutoriais de vídeo, mas também não tive sucesso, aceito sugestões;

mix.js(
  'resources/assets/js/app.js',
  ''
   'public/js')
   .sass(
     'resources/assets/sass/app.scss',
     '../../../node_modules/bootstrap/dist/css/bootstrap.css'
      'public/css');
1
  • Eu recomendaria você não usar Vue integrado dessa forma com o Laravel, eu sugiro que leia este artigo que explica muito bem o porquê. Commented 26/09/2018 às 19:47

1 Resposta 1

2

Tenta assim

Dentro do arquivo ressources/sass/app.scss você importa o bootstrap:

// Bootstrap
@import 'node_modules/bootstrap/scss/bootstrap.scss';

Em webpack.mix.js você escreve assim:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Ai no final de tudo vc vai lá no console e roda o comando:

npm run dev

Pronto, ambos estão no public do Laravel, pronto para vc utilizar nos projetos...

<script src="{{ asset('js/app.js') }}"></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

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