Instalando o Toastr.js em um aplicativo Laravel

aqui

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 dev

2 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.

Referências

https://github.com/CodeSeven/toastr