Skip to content

chore(playground): upgrade to script setup syntax and TypeScript #2490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

curtgrimes
Copy link
Contributor

Upgrade the playground package to use the <script setup> syntax and TypeScript. This change makes the playground more consistent with recent Vue.js practices and improves type safety.

Keep the purpose of each example identical to the original examples as much as possible. Therefore, components using beforeRouteEnter(), which does not have a <script setup> equivalent, are not converted to <script setup> syntax but are only converted to use TypeScript for improved type safety (Home.vue and ComponentWithData.vue). Converting these to use the recommended data loaders or defineMacro() could be an option in the future.

Update RouteNamedMap in main.ts to improve type safety and better demonstrate the newer typed routes feature (introduced in [email protected]) in LongView.vue, Nested.vue, and RepeatedParams.vue.

Fix type issue in AppLink.vue where RouterLinkProps replaces RouterLink.props.

Remove the name option from the defineComponent calls that used it, because this option is only useful when the component recursively calls itself, but there are not components in this playground project that do so.

Upgrade the playground package to use the `<script setup>` syntax and
TypeScript. This change makes the playground more consistent with recent
Vue.js practices and improves type safety.

Keep the purpose of each example identical to the original examples as
much as possible. Therefore, components using `beforeRouteEnter()`,
[which does not have a `<script setup>`
equivalent](vuejs#1517), are not
converted to `<script setup>` syntax but are only converted to use
TypeScript for improved type safety (Home.vue and
ComponentWithData.vue). Converting these to use the [recommended data
loaders or
`defineMacro()`](vuejs#1517 (comment))
could be an option in the future.

Update `RouteNamedMap` in main.ts to improve type safety and better
demonstrate the newer typed routes feature (introduced in
[email protected]) in LongView.vue, Nested.vue, and RepeatedParams.vue.

Fix type issue in AppLink.vue where `RouterLinkProps` replaces
`RouterLink.props`.

Remove the `name` option from the `defineComponent` calls that used it,
because this option is [only useful when the component recursively calls
itself](https://v2.vuejs.org/v2/api/#name),
but there are not components in this playground project that do so.
Copy link

netlify bot commented Apr 14, 2025

Deploy Preview for vue-router canceled.

Name Link
🔨 Latest commit 04d35eb
🔍 Latest deploy log https://app.netlify.com/sites/vue-router/deploys/67fc9b9e7fcadd0008089c6a

@curtgrimes curtgrimes marked this pull request as ready for review April 14, 2025 05:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant