|
5 | 5 | title="Learn about SSR best practices" |
6 | 6 | /> |
7 | 7 |
|
8 | | -Using Pinia with [Nuxt](https://nuxt.com/) is easier since Nuxt takes care of a lot of things when it comes to _server side rendering_. For instance, **you don't need to care about serialization nor XSS attacks**. Pinia supports Nuxt Bridge, Nuxt 3 and Nuxt 4. For bare Nuxt 2 support, [see below](#nuxt-2-without-bridge). |
| 8 | +Using Pinia with [Nuxt](https://nuxt.com/) is easier since Nuxt takes care of a lot of things when it comes to _server side rendering_. For instance, **you don't need to care about serialization nor XSS attacks**. Pinia supports Nuxt 3 and 4. |
9 | 9 |
|
10 | 10 | <RuleKitLink /> |
11 | 11 |
|
@@ -104,58 +104,3 @@ export default defineNuxtConfig({ |
104 | 104 | ``` |
105 | 105 |
|
106 | 106 | Note the folders are relative to the root of your project. If you change the `srcDir` option, you need to adapt the paths accordingly. |
107 | | - |
108 | | -## Nuxt 2 without bridge |
109 | | - |
110 | | -Pinia supports Nuxt 2 until `@pinia/nuxt` v0.2.1. Make sure to also install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) alongside `pinia`: |
111 | | - |
112 | | -```bash |
113 | | -yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api |
114 | | -# or with npm |
115 | | -npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api |
116 | | -``` |
117 | | - |
118 | | -We supply a _module_ to handle everything for you, you only need to add it to `buildModules` in your `nuxt.config.js` file: |
119 | | - |
120 | | -```js |
121 | | -// nuxt.config.js |
122 | | -export default { |
123 | | - // ... other options |
124 | | - buildModules: [ |
125 | | - // Nuxt 2 only: |
126 | | - // https://composition-api.nuxtjs.org/getting-started/setup#quick-start |
127 | | - '@nuxtjs/composition-api/module', |
128 | | - '@pinia/nuxt', |
129 | | - ], |
130 | | -} |
131 | | -``` |
132 | | - |
133 | | -### TypeScript |
134 | | - |
135 | | -If you are using Nuxt 2 (`@pinia/nuxt` < 0.3.0) with TypeScript or have a `jsconfig.json`, you should also add the types for `context.pinia`: |
136 | | - |
137 | | -```json |
138 | | -{ |
139 | | - "types": [ |
140 | | - // ... |
141 | | - "@pinia/nuxt" |
142 | | - ] |
143 | | -} |
144 | | -``` |
145 | | - |
146 | | -This will also ensure you have autocompletion 😉 . |
147 | | - |
148 | | -### Using Pinia alongside Vuex |
149 | | - |
150 | | -It is recommended to **avoid using both Pinia and Vuex** but if you need to use both, you need to tell pinia to not disable it: |
151 | | - |
152 | | -```js |
153 | | -// nuxt.config.js |
154 | | -export default { |
155 | | - buildModules: [ |
156 | | - '@nuxtjs/composition-api/module', |
157 | | - ['@pinia/nuxt', { disableVuex: false }], |
158 | | - ], |
159 | | - // ... other options |
160 | | -} |
161 | | -``` |
0 commit comments