Upgrade to shadcn-vue v4

[geisi]

Hi Laravel team,

This PR updates the Laravel Vue Starter kit to the recently deployed v4 Version of Shadcn Vue.

unovue/shadcn-vue#1515

I think this is a good moment to do that, since Shadcn Vue has updated their docs to v4 only.

The legacy docs are still accessible here:

https://v3.shadcn-vue.com/

Without this change, developers will encounter errors when adding some Shadcn (e.g., Calendar) components or using code snippets from the docs.

Please note that the default style is now deprecated with v4. That's why I have changed it to new-york instead.

I have re-added all the components used from the starter kit. And tested the whole UI, everything works, and is now using the New York styling instead with v4 components.

I think this is the best baseline to prevent developer frustration when working with this starter kit.

[taylorotwell]

All of the changes from single to double quotes make it extremely hard to tell what is actually changed here. 🫠

Can you only make this PR include the real changes?

[geisi]

@taylorotwell You're absolutely right! 🙂
I’ve re-imported all Shadcn components used by the Vue Starter Kit so the styling and formatting now match the original Shadcn components exactly.

For example, see the Avatar.vue component here:
https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/registry/new-york-v4/ui/avatar/Avatar.vue

To preserve the original Shadcn styling, the Starter Kit excludes all UI components from ESLint — so I believe this behavior is intentional.

From a DX perspective, I think this is the best approach, as keeping the Shadcn styling unchanged helps avoid confusion when developers add or override components with newer Shadcn versions.

If you’d prefer not to keep the original Shadcn components exactly as they are, just let me know, and I’ll apply ESLint fixes to the modified files.

[Plytas]

@geisi looks like you forgot to push.

[hafezdivandari]

The pin input component has been deprecated in favor of the input otp component.

[geisi]

@hafezdivandari
Thanks for pointing this out. I have migrated the implementation to the new input otp component. Please note that this is introducing a new node dependency (vue-input-otp).

@Plytas

Sorry for the confusion, no, I did not forget to push any changes. The styling changes in the ui directory are intentional to follow the Shadcn Vue component structure and allow a cleaner upgrade path for future Shadcn Vue updates.

If this is not wanted, I can try to apply the old styling, but then we won't be following the original Shadcn-Vue components anymore.

[hafezdivandari]

Is there a linter config that can automatically fix single/double quotes? That might help this get merged sooner.

[geisi]

Yes, as already mentioned, my question was whether I should change the styling of the ShadCN components.

But I don't think it makes sense to change the styling here. We should follow the upstream component styling to improve DX when upgrading/adding new Shadcn components.

Suppose starter kit users add new Shadcn components. In that case, their styling will differ from that of the components delivered with the starter kit, which will confuse developers and lead to inconsistent UI component styling.