docs: update examples to use SFCs

[skirtles-code]

Objectives

• Switch examples to use SFC syntax.
• Include Composition API examples with <script setup>.
• Update the wording to take account of the Composition API, including changing any wording that makes it sound like a new, exotic choice.

There are lots of other changes that might be desirable, but I've tried to stick to that scope as much as possible. For the most part, the order and flow of the existing docs has been retained.

These changes need making in one big jump to keep the guide consistent. Migrating one page at a time would just make the guide highly confusing.

I am aware that big changes like these are a burden for translators. I've tried to take that into account where possible.

General changes

In many cases, the change just involved switching an existing example to use SFC syntax.

In examples that needed a <script> section, both Composition API and Options API examples have been provided. This is using a VitePress code group. The source .md file ends up looking much longer, but the code group keeps the examples relatively brief in the generated docs.

Mentions of $router or $route have been updated, where necessary. In the templates those are retained, but in the main text they are generally replaced with router and route respectively. In cases where it seems particularly necessary there is further explanation about what those variables are, though it is already covered in the Getting Started page at the beginning of the guide.

In parts of the docs that already mentioned the Composition API, it tended to be described as 'new', or presented as an exotic or alien alternative to the Options API. Those sections also tended to predate <script setup> and referenced the use of a setup function. The wording of those sections has been updated to present the use of <script setup> as a normal way to use Vue.

Specific pages

composition-api.md - Composition API

This is a bit of a tricky page to update. I don't want to remove the page entirely, as that would need bigger changes elsewhere, but having a separate page for the Composition API does feel a bit unnatural when it's now being used in most of the other pages.

data-fetching.md - Data Fetching

I'm not sure what to do about the examples on this page. The first one was easily updated, but it isn't clear to me how useful that example is in isolation. It doesn't really demonstrate much from a Vue Router perspective.

The second example is much more enlightening, but it only works with the Options API. It could be written using the Composition API and defineOptions, but as discussed in #2131, that isn't necessarily the way to go in a docs example. But I don't know what to show instead. A future plan based on data loaders doesn't really help people reading the docs today.

Perhaps that second section should include a warning box that explicitly notes the lack of a Composition API example? I think that would be better than the example being conspicuously absent without an explanation.

installation.md - Installation

The diff on GitHub is a bit difficult to follow. All I've done is swap the order of the sections. This brings it into line with the rest of the docs, which now assume build tools and SFCs.

index.md - Getting Started

This is probably the most important change in this PR.

This page has been almost entirely rewritten, though the overall objective and approach is similar to the old page.

I think the Getting Started page is primarily aimed at beginners. Experienced users are more likely to focus on the later pages, looking for details about the specific features they're using. While we'd obviously like all pages to be understandable by beginners, I think it makes sense for the Getting Started page to be a little more explicit in its explanations and take things a bit slower.

There are a few things I've done with that in mind:

• Briefly explaining what Vue Router is and what it's for.
• Explicitly stating the prerequisites near the top.
• Allowing key ideas to be repeated if they seem relevant.
• Explaining core Vue concepts that beginners may have overlooked or forgotten. In general, this is not the job of the Router docs, but I think it's worth it here.
• Establishing the conventions that will be used in the rest of the guide.

Some parts of that were inspired by this feedback about the current page: #2068 (comment).

[netlify]

✅ Deploy Preview for vue-router ready!

Name	Link
🔨 Latest commit	4d5be61
🔍 Latest deploy log	https://app.netlify.com/sites/vue-router/deploys/65f1fa667ee05d0009dcc8d2
😎 Deploy Preview	https://deploy-preview-2174--vue-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 97 Accessibility: 100 Best Practices: 100 SEO: 92 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[posva]

Thanks a lot for this! I took the occasion to comment on some small improvements over the existing code

[posva]

Thanks a lot for the great work!