How to pass active url into template component

[ruslankonev]

Hi, at first thanks for your job!
But I have some question about pass some routing props into components to render active link or etc.

As example, I have a navigation component with set of links, and one of link need to have an active class.

Via Vue-Router I have a global props $router or $route.path into templates scope, but I don't know how to do that with your tool.

<a  :class="{active: $route.path === href }" ></a>

[brillout]

The URL is available at contextProps.url and you can pass it to the browser by adding it to passToClient.

// _default.page.server.js

export const passToClient = ['pageProps', 'url'];

You can then pass contextProps.url to all your components with https://v3.vuejs.org/api/application-api.html#provide or https://v3.vuejs.org/guide/migration/global-api.html#vue-prototype-replaced-by-config-globalproperties. If you use Vue 2: https://vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example.

Does that work for you?

[ruslankonev]

I will try, thanks

[gryphonmyers]

FYI a full integration with Vue Router is in progress.

[brillout]

See https://github.com/brillout/vite-plugin-ssr#active-links-a-classis-active.

Note that contextProps.url is depcrated; use contextProps.urlPathname or contextProps.urlFull instead.