Difference between router-link and RouterLink in Vue

When using Vue Router, I found that I could use <router-link> as well as RouterLink to achieve the same result, i.e. navigate between different routes.

Similarly, there's <router-view> as well as RouterView component.

Following two code examples give me the same result:

With <router-link> and <router-view>:

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <hr />
  <router-view></router-view>
</template>

With <RouterLink> and <RouterView>:

<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>
  <hr />
  <RouterView />
</template>

Question

What is the difference between <router-link> and RouterLink (and between <router-view> and RouterView?)

I couldn't find anything on Vue Router docs. Searching for RouterView or RouterLink doesn't show any results related to them. Docs only mention <router-link> and <router-view>.

P.S. Scaffolding a new Vue project with npm init vue@latest command uses RouterLink and RouterView components instead of router-link and router-view.

Solution

It's the same components, just with different cases, in vue it's recommended to use the PascalCase syntax as mentioned here :

In SFCs, it's recommended to use PascalCase tag names for child components to differentiate from native HTML elements. Although native HTML tag names are case-insensitive, Vue SFC is a compiled format so we are able to use case-sensitive tag names in it. We are also able to use /> to close a tag.