How to add a npm package in my blade view ?

Hi there,

There are a few things that I could suggest:

• Start by learning the basics of Laravel, here is a course for that:

Laravel basics

• Then go through the Voyager academy free videos:

Laravel Voyager academy

• Then finally go through the Wave introduction videos:

Wave video course

• Additionally, you can go through the following video series where Tony builds a project using Wave:

Building a SaaS with Wave

Regarding the npm packages, you can add them to theme directory at the resources/views/theme/tailwindcss and then use them in your app.js file as a standard Laravel app.

For more information on the themes, you can take a look at the themes documentation here:

Wave docs

Hope that this helps!

Best,

Bobby

Hi thanks for the quick reply and all the resources, i forgot to say that it's with tallstack so we add livewire with it.

So basically : After doing npm install typeit

The package is installed

If i wan't to use it on my home.blade

I need to import ? require ? into app.js

I tried both but then how to use it ?

I know about laravel ? more about backend stuff but all that new frontend way of thinking, despite taking my time i don't understand why people love all that webpack and others ...

Hi there,

Yes the same would go for the tallstack theme.

You would install the new package at resources/views/themes/tallstack by first accessing the dir:

cd resources/views/themes/tallstack

Then running the npm install package_name command in there.

After that you can include the package in the app.js file:

resources/views/themes/tallstack/assets/js/app.js

And finally run npm run production to compile your new assets.

Then the package will be available as normal and you can use it in your views.

Here is an example with the helllo world package:

• I've installed it with npm install in the resources/views/themes/tallstack/ dir
• Then I've ran npm run production to build the assets
• In my resources/views/themes/tallstack/assets/js/app.js I have:

import { helloWorld } from 'hello-world-npm'

window.helloWorld = helloWorld;

• Then in any blade view that includes the compiled app.js file from the public folder you can use the JS function:

<script>
         console.log(helloWorld());
</script>

Let me know if you have any questions.

hi,

Ok i tried it, it's working for a simple javascript plugin.

but when i try to use it with a jquery plugin it's not working. I got something like this on my app.js

import 'alpinejs' import $ from 'jquery'; window.$ = window.jQuery = $;

require('typeit');

$('#nomproduit').typeIt({ whatToType: "You've just initialized this bad boy.", typeSpeed: 100 });

EDIT : Finally i'm good it was all a mess with the naming and the npm didn't caught the jquery version of my plugin. Anyway thanks i can go further for my project.