feat: add useRoute, useRouter and useStore wrapper functions

docs/content/en/packages/routes.md

@@ -0,0 +1,38 @@
+---
+title: useRoute, useRouter
+description: 'Access this.$route and this.$router with the Nuxt Composition API.'
+category: Packages
+position: 12
+---
+
+In Vue 3, `vue-router` exports composition functions for accessing the current route and router.
+
+These helpers provide an equivalent while using Nuxt 2
+
+## useRoute
+
+Returns `this.$route`.
+
+```ts
+import { defineComponent, useRoute } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    const route = useRoute()
+  }
+})
+```
+
+## useRouter
+
+Returns `this.$router`.
+
+```ts
+import { defineComponent, useRoute } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+  }
+})
+```

docs/content/en/packages/store.md

@@ -0,0 +1,42 @@
+---
+title: useStore
+description: 'Access this.$store with the Nuxt Composition API.'
+category: Packages
+badge: migration
+position: 12
+---
+
+Vuex v4 [provides a helper function](https://next.vuex.vuejs.org/api/#usestore) for accessing it within the Composition API. This helper provides an equivalent while using Nuxt 2
+
+## useStore
+
+Returns `this.$store`.
+
+```ts
+import { defineComponent, useStore } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    const store = useStore()
+  }
+})
+```
+
+You can also provide an injection key to get back a semi-typed store:
+
+```ts
+import { defineComponent, useStore } from '@nuxtjs/composition-api'
+
+export interface State {
+  count: number
+}
+
+export const key: InjectionKey<Store<State>> = Symbol()
+
+export default defineComponent({
+  setup() {
+    const store = useStore(key)
+    // store.state.count will be typed as a number
+  }
+})
+```

docs/content/en/helpers/useMeta.md → docs/content/en/packages/useMeta.md

@@ -1,9 +1,9 @@
 ---
 title: useMeta
-description: '@nuxtjs/composition-api provides a way to use the Vue 3 Composition API with Nuxt-specific features.'
-category: Helpers
+description: 'You can define your head and meta properties with the Nuxt Composition API.'
+category: Packages
 fullscreen: True
-position: 18
+position: 10
 ---
 
 You can interact directly with [head properties](https://nuxtjs.org/api/pages-head/) in `setup` (and within the `onGlobalSetup` method) by means of the `useMeta()` helper.

src/entrypoint.ts

@@ -13,6 +13,7 @@ export { reqRef, reqSsrRef } from './req-ref'
 export { ssrRef, shallowSsrRef, setSSRContext, ssrPromise } from './ssr-ref'
 export { useStatic } from './static'
 export * from './defineHelpers'
+export * from './wrappers'
 
 export type {
   ComponentInstance,

src/wrappers.ts

@@ -0,0 +1,35 @@
+import { InjectionKey } from '@vue/composition-api'
+import type { Store } from 'vuex'
+
+import { getCurrentInstance } from './utils'
+
+const wrapProperty = (
+  property: keyof NonNullable<ReturnType<typeof getCurrentInstance>>
+) => {
+  return () => {
+    const vm = getCurrentInstance()
+    if (!vm) throw new Error('This must be called within a setup function.')
+
+    return vm[property]
+  }
+}
+
+/**
+ * Gain access to the router just like using this.$router in a non-Composition API manner.
+ */
+export const useRouter = wrapProperty('$router')
+
+/**
+ * Gain access to the route just like using this.$route in a non-Composition API manner.
+ */
+export const useRoute = wrapProperty('$route')
+
+/**
+ * Gain access to the store just like using this.$store in a non-Composition API manner.
+ */
+export const useStore = <S>(key?: InjectionKey<S>): Store<S> => {
+  const vm = getCurrentInstance()
+  if (!vm) throw new Error('This must be called within a setup function.')
+
+  return vm.$store
+}

test/e2e/wrappers.ts

@@ -0,0 +1,21 @@
+import { Selector } from 'testcafe'
+import { navigateTo, expectOnPage, expectPathnameToBe } from './helpers'
+
+// eslint-disable-next-line
+fixture`Wrappers`
+
+test('Shows data on ssr-loaded page', async () => {
+  await navigateTo('/wrappers')
+  await expectOnPage('store: true')
+  await expectOnPage('route: true')
+  await expectOnPage('router: true')
+})
+
+test('Shows appropriate data on client-loaded page', async t => {
+  await navigateTo('/')
+  await t.click(Selector('a').withText('wrappers'))
+  await expectPathnameToBe('/wrappers')
+  await expectOnPage('store: true')
+  await expectOnPage('route: true')
+  await expectOnPage('router: true')
+})

test/fixture/pages/index.vue

@@ -40,6 +40,7 @@
         <nuxt-link to="/no-setup">ssr ref defined outside of setup</nuxt-link>
       </li>
       <li><nuxt-link to="/meta">meta</nuxt-link></li>
+      <li><nuxt-link to="/wrappers">wrappers</nuxt-link></li>
     </ul>
     <div>
       TTFB: {{ ttfb }}ms

test/fixture/pages/wrappers.vue

@@ -0,0 +1,28 @@
+<template>
+  <blockquote>
+    <p>
+      <code>store: {{ storeExists }}</code>
+      <code>route: {{ routeExists }}</code>
+      <code>router: {{ routerExists }}</code>
+    </p>
+  </blockquote>
+</template>
+
+<script>
+import {
+  defineComponent,
+  useRoute,
+  useRouter,
+  useStore,
+} from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    return {
+      routeExists: !!useRoute(),
+      routerExists: !!useRouter(),
+      storeExists: !!useStore(''),
+    }
+  },
+})
+</script>

test/fixture/store/index.js

@@ -0,0 +1 @@
+export const state = () => ({})