# vue-router-next [![CircleCI](https://circleci.com/gh/fyzhu/vue-router-next.svg?style=svg)](https://circleci.com/gh/fyzhu/vue-router-next) [![codecov](https://codecov.io/gh/fyzhu/vue-router-next/branch/master/graph/badge.svg)](https://codecov.io/gh/fyzhu/vue-router-next) [![](https://img.shields.io/npm/v/vue-router-next)](https://www.npmjs.com/package/vue-router-next)

`vue-router-next` is an implementation of [react-router](https://reacttraining.com/react-router/web/guides/philosophy) for Vue 3, providing components and hooks for routing.

## Table of contents

  - [Install](#install)
  - [API](#api)
  - [Non-standard APIs](#non-standard-apis)
    - [Getting Started](#getting-started)
    - [Components](#components)
      - [Route](#route)
        - [v-slot:element](#v-slotelement)
      - [HashRouter](#hashrouter)
      - [StaticRouter](#staticrouter)
    - [Hooks](#hooks)
      - [useInRouterContext](#useinroutercontext)

## Install

```sh
npm i vue-router-next
```

## API

For API documentation, please visit
[React Router API](https://github.com/ReactTraining/react-router/blob/dev/docs/api-reference.md).

## Non-standard APIs

### Getting Started

The router export is a function that registers all the components globally

```typescript
import { router } from 'vue-router-next'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(router)

app.mount('#app')
```

### Components

#### Route

##### v-slot:element

`Element slot` can be used over `element prop`.

If both are present `element slot` will overwrite `element prop`.

```html
<!-- App.vue -->
<template>
    <BrowserRouter>
      <Routes>
        <Route path="/">
          <Home />
        </Route>
        <Route path="users">
          <template #element>
            <Users />
          </template>
          <Route path="/">
            <UsersIndex />
          </Route>
          <Route path=":id">
            <UserProfile />
          </Route>
          <Route path="me">
            <OwnUserProfile />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
</template>
  <!-- Home.vue -->
<template>
  <div>
    <nav>
      <Link to="users">users</Link>
    </nav>
  </div>
</template>
<!-- Users.vue -->
<template>
  <div>
    <nav>
      <Link to="me">My Profile</Link>
    </nav>

    <Outlet />
  </div>
</template>
```

#### HashRouter

#### StaticRouter

`StaticRouter`, `HashRouter` are not implemented yet

### Hooks

#### useInRouterContext

is not implemented since it is easy to check in Vue

```ts
export default {
  setup() {
    const locationContext = inject(LOCATION_CONTEXT, null)
    if (locationContext === null) {
      throw new Error('not in router context')
    }
    // ...
  },
}
```