Laravel Sail + Vue 3 best practice

I created my first Laravel Sail yesterday but I've a tiny problem with Vue because creating a frontend in a separated folder caused some headache to me. As there are two different package.json one in the project root and the other in frontend folder. So whenever I need to execute npm run dev I've to use --prefix for pointing to frontend folder. Same issue with npx I've to point to the frontend by selecting the workspace!!!

I definitely suspect there is something wrong with my practice. So may you please guide me to the best practice to use Laravel Sail + Laravel backend api + Vue frontend?

Steps I did to create my project structure:

1. curl -s https://laravel.build/example-app | bash
2. Added alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail' into ~/.bashrc
3. executed sail up from project's root
4. sail npm init vite frontend
5. cd ./frontend
6. sail npm i ---> ERROR because there is no sail in sub-folder
7. cd ..
8. sail npm i --prefix ./frontend
9. sail npm run dev --prefix ./frontend ---> ERROR because it hasn't --host
10. Modified frontend/package.json to dev": "vite --host"
11. sail npm run dev --prefix ./frontend
12. sail npm install --prefix ./frontend/ -D tailwindcss postcss autoprefixer
13. sail npx --prefix ./frontend/ tailwindcss init -p ---> ERROR npx doesn't accept --prefix
14. sail npx -w ./frontend/ tailwindcss init -p ---> ERROR there is no workspace configured!
15. cd frontend/
16. ln -s ../vendor/laravel/sail/bin/sail sail
17. ./sail npx tailwindcss init -p
18. rm ./sail
19. cd ..

As you can see the calling --prefix really lame solution and the most stupid steps were 13... 18 because I needed to find a workaround by creating a symbolic link then delete it once again... really lame!

BTW, in 17. step although the current path is ./frontend but npx generates the entries in project's root package.json instead of frontend/package.json so I cut them manually from package.json to frontend/package.json !!!