#Astro and Vue SPA

2 messages · Page 1 of 1 (latest)

weary horizon
#

I know that I can use Vue's components in Astro, but how can i render vue's components like an spa (so no SSR), in a specific path/folder (i.e. dashboard/)? Thank You

agile orbit
#

create a page to be the entry point for your spa e.g. src/pages/dashboard/[...vuespa].astro

inside you will write the html and insert your vue component in the body, with a client directive to hydate javascript

e.g.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/yourlogo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vue App</title>
  </head>
  <body>
    <VueApp client:only="vue" />
  </body>
</html>

or you can use layout if you want.

you most probably have to enable SSR for it to work so that the page will be served to any matching route. The app will still be client side rendered.