Migrate from Nuxt to Astro

Navigate between page

since we no longer use vue-router plugins. so component / pages that using useNavigate must remote it and change how to redirect. we can redirect to another page use HTML <a href or use window.location.href . this redirect will perform full page refresh

Using store
- Nano store nano store is a simple state management that can work across UI components. primary usage of nano store to share state between astro component (but also work in vue component). you can read more here https://docs.astro.build/en/core-concepts/sharing-state/#why-nano-stores and https://github.com/nanostores/nanostores
```
  *   **Pinia store**
```

to keep migration as little as possible we keep using pinia as our main store state management. but there is little syntax change to share state between componnet.

import appStore

call appStore on store initialization

Determine when use astro component or vue component
- Previously our page / root component was vue file. but now we must use astro component so we can control when to hydrate interactive component (see https://docs.astro.build/en/core-concepts/framework-components/#hydrating-interactive-components). and we can simplify a page component that never use JS
- use as many as possible astro component and use vue component only on interactive component
Using translation

since we no longer use vue-i18n plugin, we write our function to translate a string. it's located at src/service/common/language.ts

the syntax is almost same with we have in nuxt project

```
  *   **Defining global function / listener**
```
In nuxt project, for example in home page we have components Home.vue as parent that wrap other component. usually we put some shared function / global function for that in that component. now in astro project a parent component must be astro file and it have very different functionality ( can't handle vue emit events from it's children and can't use pinia store) . so the solution where we store global function is to create entry component

Keyboard shortcuts

HungryHub Knowledge Base

Migrate from Nuxt to Astro