How to insert assets (js and css from node_modules) using Vite

[burnt hedge]

I'm implementing a Ttailwind theme, but I'm with some doubts about the correct way to call some .css and .js that I install in package.json.
In my layout I will have
@vite(['resources/css/app.css', 'resources/js/app.js'])
The app.css have all the css in most pages but in some pages I will need some extra .css and .js specific for that page, this files are known extensions for example like tiny-slider.js and tiny-slider.css, I have it installed via package.json, what is the correct way to use this in a view?

Using laravel Mix I usually publish that assets to the public folder then in the view I call something like this:

<link href="{{ asset('/assets/tiny-slider/dist/tiny-slider.css') }}" rel="stylesheet">
<script src="{{ asset('/assets/tiny-slider/dist/min/tiny-slider.js') }}"></script>

But using vite I don't know how to do something similar, in most examples the tiny-slider (or other plugin) is included in app.js or app.css but in this case it will be present in all pages and I want to use it only where is needed.

Can someone explain me how can I do this correctly.

[oak zodiac]

Usually you'd just import the package like import { tns } from 'tiny-slider and the css would probably be something like import 'tiny-slider/tiny-slider.scss

[burnt hedge]

@oak zodiac But with that approach it will include the tiny-slider in my app.css and my app.js, I will only use tiny-slider in 1 page and I have more than 30 pages so I think it's better to only include the css and js of tiny slider on that specific page.

[oak zodiac]

You could add another entrypoint to Vite and use that