Vue 3 cheatsheet

Vue 3: Router and Pinia

5 common Vue 3 tasks.

Install Vue Router

Add the official Vue router.

npm install vue-router@4

Link to a route

Navigate without reloading the page.

<RouterLink to="/about">About</RouterLink>

Read the current route

Access route params and query values.

const route = useRoute();
console.log(route.params.id);

Install Pinia

Add the official state management library.

npm install pinia

Define a store

Create a store with state and actions using the setup syntax.

export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
});