How to create multiple separate js files using vite? migrating from mix to vite

Background:

Hello, I'm a beginner webdev. Currently I'm working on a project which requires migration of vue2 laravel app bundled with laravel-mix to vue3 laravel app with vite.

I don't have enough knowledge about either laravel-mix or vite. I tried reading the docs but didn't understand enough to do the task at hand

Situation using laravel-mix

in app.blade.php

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

        <script src="{{ asset('js/manifest.js') }}" defer></script>
        <script src="{{ asset('js/vendor-vue.js') }}" defer></script>
        <script src="{{ asset('js/vendor.js') }}" defer></script> 
        <script src="{{ asset('js/app.js') }}" defer></script>

From what I understand, laravel-mix is generating 4 js files manifest.js, vendor-vue.js, vendor.js, js/app.js & 1 css file app.js

How do I accomplish the same using vite? Just adding @vite('resources/js/app.js') to app.blade.php won't work right?

the deleted webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.extract({
    to: 'js/vendor-vue.js',
    libraries: /vue|vue-[a-z0-9-]+/
});
mix.extract();

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .postCss('resources/css/store.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}
		

What I did?

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias:{
            '@' : `/resources/js`
        },
    },
});

Is generating 4 js files & 1 css file ideal? isn't 1 js file & 1 css file ideal? What is the best practice? How to accomplish this task with vite?

I'm sort of clueless. Any guidance will be of great help.