From 06e5f26d08199adce4e9ac0bf92c7338a895516b Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 31 Mar 2021 10:47:12 +0200 Subject: [PATCH] docs: better ssr --- docs/.vitepress/config.js | 10 +++++ docs/.vitepress/theme/custom.css | 8 ++++ docs/getting-started.md | 2 +- docs/ssr/index.md | 41 +++++++------------ docs/ssr/nuxt.md | 70 ++++++++++++++++++++++++++++++++ 5 files changed, 103 insertions(+), 28 deletions(-) create mode 100644 docs/ssr/nuxt.md diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index d84133eb..9905109b 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -183,6 +183,16 @@ module.exports = { { text: 'Server-Side Rendering (SSR)', link: '/ssr/', + children: [ + { + text: 'Vue and Vite', + link: '/ssr/', + }, + { + text: 'Nuxt.js', + link: '/ssr/nuxt.html', + }, + ], }, { text: 'Cookbook', diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index ef896091..18595861 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -113,6 +113,14 @@ html:not(.light):root { --code-inline-bg-color: var(--c-black-light); } +html:not(.light) .custom-block.warning { + color: var(--c-text); +} + +html:not(.light) .custom-block.warning a { + color: var(--c-brand); +} + html:not(.light) .DocSearch { --docsearch-text-color: var(--c-white-dark); --docsearch-container-background: rgba(9, 10, 17, 0.8); diff --git a/docs/getting-started.md b/docs/getting-started.md index 2012d248..c61eec74 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -9,7 +9,7 @@ npm install pinia@next ``` :::tip -`pinia@next` install Pinia v2 for Vue 3. If your app is using Vue 2, you need to install Pinia v1: `pinia@latest` **and** `@vue/composition-api`. If you are using Nuxt, you should follow [these instructions](./ssr/index.md#nuxt-js). +`pinia@next` install Pinia v2 for Vue 3. If your app is using Vue 2, you need to install Pinia v1: `pinia@latest` **and** `@vue/composition-api`. If you are using Nuxt, you should follow [these instructions](/ssr/nuxt). ::: Create a pinia (the root store) and pass it to app: diff --git a/docs/ssr/index.md b/docs/ssr/index.md index 5cee50ca..e256e9f9 100644 --- a/docs/ssr/index.md +++ b/docs/ssr/index.md @@ -1,17 +1,24 @@ # Server Side Rendering (SSR) +:::tip +If you are using **Nuxt.js,** you need to read [**these instructions**](./nuxt.md) instead. +::: + Creating stores with Pinia should work out of the box for SSR as long as you call your `useStore()` functions at the top of `setup` functions, `getters` and `actions`: ```ts export default defineComponent({ setup() { - // this works because pinia knows what application is running + // this works because pinia knows what application is running inside of + // `setup()` const main = useMainStore() return { main } }, }) ``` +## Using the store outside of `setup()` + If you need to use the store somewhere else, you need to pass the `pinia` instance [that was passed to the app](#install-the-plugin) to the `useStore()` function call: ```ts @@ -22,41 +29,21 @@ app.use(router) app.use(pinia) router.beforeEach((to) => { - // ✅ This will work make sure the correct store is used for the current running app + // ✅ This will work make sure the correct store is used for the + // current running app const main = useMainStore(pinia) if (to.meta.requiresAuth && !main.isLoggedIn) return '/login' }) ``` -## Nuxt.js - -Make sure to install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/): - -```bash -yarn add pinia @nuxtjs/composition-api -# or with npm -npm install pinia @nuxtjs/composition-api -``` - -If you are using Nuxt, we supply a _module_ to handle everything for you, you only need to add it to `buildModules` in your `nuxt.config.js` file: +Pinia conveniently adds itself as `$pinia` to your app so you can use it in functions like `serverPrefetch()`: ```js -// nuxt.config.js export default { - // ... other options - buildModules: ['@nuxtjs/composition-api', 'pinia/nuxt'], -} -``` - -If you are using TypeScript or have a `jsconfig.json`, you should also add the types for `context.pinia`: - -```js -{ - "include": [ - // ... - "pinia/nuxt/types" - ] + serverPrefetch() { + const store = useStore(this.$pinia) + }, } ``` diff --git a/docs/ssr/nuxt.md b/docs/ssr/nuxt.md new file mode 100644 index 00000000..de68638c --- /dev/null +++ b/docs/ssr/nuxt.md @@ -0,0 +1,70 @@ +# Nuxt.js + +Using Pinia with [Nuxt.js](https://nuxtjs.org/) is easier since Nuxt takes care of a lot of things when it comes to _server side rendering_. + +## Installation + +Make sure to install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) alongside `pinia`: + +```bash +yarn add pinia @nuxtjs/composition-api +# or with npm +npm install pinia @nuxtjs/composition-api +``` + +We supply a _module_ to handle everything for you, you only need to add it to `buildModules` in your `nuxt.config.js` file: + +```js +// nuxt.config.js +export default { + // ... other options + buildModules: ['@nuxtjs/composition-api', 'pinia/nuxt'], +} +``` + +And that's it, use your store as usual! + +## Using the store outside of `setup()` + +If you want to use a store outside of `setup()`, remember to pass the `pinia` object to `useStore()`. We added it to [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) so you have access to it in `asyncData()` and `fetch()`: + +```js +export default { + asyncData({ pinia }) { + const store = useStore(pinia) + }, +} +``` + +## Using the Nuxt context in stores + +You can also use [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) in any store by using the injected property `$nuxt`: + +```js +defineStore({ + id: 'main', + + actions: { + login() { + if (!canLogin()) { + this.$nuxt.redirect('/login') + } + }, + }, +}) +``` + +## Typescript + +If you are using TypeScript or have a `jsconfig.json`, you should also add the types for `context.pinia`: + +```js +{ + "include": [ + // ... + "pinia/nuxt/types" + ] +} +``` + +This will also ensure you have autocompletion 😉 . -- 2.47.2