Instalando o Toastr.js em um aplicativo Laravel
- Erick Giorgio
- 01 Jan 2023
A ideia aqui pode ser usada para instalar qualquer biblioteca Javascript no seu Laravel App, além de inserir o link CDN todas as vezes.
Para evitar isso; você pode simplesmente adicionar o link CSS e Js cdn ao seu blade template. Mas, por uma questão de desempenho e implantações de produção estável, vamos passar pelo estresse abaixo.
Instalação
1. Execute o npm install no diretório raiz do projeto para obter todas as suas dependências Javascript .
2. Execute o comando npm abaixo para obter seu pacote toastr.
$ npm install toastr --save
Configuração
1. Adicione Toastr Js no arquivo /resources/js/bootstrap.js .
window.toastr = require('toastr');2 Como a última inicialização tem um. classe toast CSS, que substituiria a classe toastr CSS .toast , dividiremos o arquivo scss a ser compilado em dois.No diretório /resources /sass, adicione um novo arquivo e chame-o de toastr.scss por exemplo. Importe o toastr css (scss, na verdade) adicionando-o ao arquivo recém-criado
@import '~ toastr/toastr';
3. Edite seu webpack.mix.js (encontrado no diretório raiz) para ficar assim.
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css').sass('resources/sass/toastr.scss', 'public/css');Ou algo assim, neste caso compila os arquivos junto com seu app.css
mix.js('resources/js/app.js','public/js')
.sass(['resources/sass/app.scss', 'resources/sass/toastr.scss'], 'public/css')isso significa que nosso arquivo toastr.scss criado seria compilado no arquivo /css/toastr.css. no primeiro modelo ou /css/app.css.
Compile o recurso
1 Executando
npm run dev2 Inclua o seguinte no seu modelo de blade raiz (costumava ser /layouts/app.blade.php, agora você precisará configurá-lo)
<link href="{{ asset('css/app.css') }}" rel="stylesheet"><link href="{{ asset('css/toastr.css') }}" rel="stylesheet">.
.
.
.
<script src="{{ asset('js/app.js') }}"></script>
Conclusão
Agora, temos o toastr instalado em nosso aplicativo Laravel e pode ser usado chamando a palavra-chave toastr conforme indicado na documentação.Por favor, deixe um comentário abaixoSe houver algo que eu perdi.Obrigado pelo seu tempo.
