feat: migrate module to support nuxt3 and bridge (#316)

.eslintrc.js → .eslintrc.cjs

@@ -7,5 +7,9 @@ module.exports = {
     curly: 'off',
     'no-empty': 'off',
     'no-undef': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/multi-word-component-names': 'off',
+    'import/named': 'off',
   },
 }

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
-        node: [12, 14]
+        node: [14]
 
     steps:
       - uses: actions/setup-node@v2
@@ -44,6 +44,9 @@ jobs:
       - name: Install dependencies
         run: yarn
 
+      - name: Build project
+        run: yarn dev:prepare
+
       - name: Build project
         run: yarn build
 

.gitignore

@@ -12,6 +12,7 @@ node_modules
 .idea
 *.log*
 .nuxt
+.output
 .vscode
 .DS_Store
 coverage

README.md

@@ -6,7 +6,7 @@
 [![Codecov][codecov-src]][codecov-href]
 [![License][license-src]][license-href]
 
-> [Sanity](https://sanity.io/) integration for [NuxtJS](https://nuxtjs.org)
+> [Sanity](https://sanity.io/) integration for [Nuxt](https://nuxtjs.org)
 
 - [✨  Release Notes](https://sanity.nuxtjs.org/releases)
 - [📖  Documentation](https://sanity.nuxtjs.org)
@@ -15,9 +15,9 @@
 
 - Just bring your sanity.json - no additional configuration required
 - Ultra-lightweight Sanity client
-- Zero-config image component
+- Zero-config image/file components + portable text renderer
 - Supports GROQ syntax highlighting
-- Full support for TypeScript
+- Nuxt 3 and Nuxt Bridge support
 
 [📖  Read more](https://sanity.nuxtjs.org)
 

docs/.gitignore

@@ -1 +1,10 @@
 static/sw.js
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

docs/package.json

@@ -5,7 +5,13 @@
     "generate": "nuxt generate"
   },
   "devDependencies": {
+    "@nuxtjs/composition-api": "^0.31.0",
     "docus": "0.5.14",
+    "nuxt-edge": "latest",
     "vue-plausible": "1.2.1"
+  },
+  "resolutions": {
+    "vue": "2.6.14",
+    "vue-template-compiler": "2.6.14"
   }
 }

docs/pages/en/1.getting-started/1.quick-start.md

@@ -3,6 +3,10 @@ title: Quick start
 description: 'Access text, images, and other media with Nuxt and the Sanity headless CMS.'
 ---
 
+:::alert{type="info"}
+v1 of this module works with Nuxt 3 and Nuxt Bridge. If you are looking for the old docs, you can find them [here](https://v0.sanity.nuxtjs.org).
+:::
+
 ## Setup
 
 1. **Install Sanity integration**
@@ -26,39 +30,27 @@ description: 'Access text, images, and other media with Nuxt and the Sanity head
 
 2. **Enable the module in your Nuxt configuration**
 
-   :::::code-group
-   ::::code-block{label="Nuxt 2.9+" active}
-
    ```js{}[nuxt.config.js]
-   {
-     buildModules: ['@nuxtjs/sanity/module']
-   }
-   ```
+   import { defineNuxtConfig } from 'nuxt3'
 
-   ::::
-   ::::code-block{label="Nuxt < 2.9"}
-
-   ```js{}[nuxt.config.js]
-   {
-     modules: ['@nuxtjs/sanity/module']
-   }
+   export default defineNuxtConfig({
+     modules: ['@nuxtjs/sanity']
+   })
    ```
 
-   ::::
-   :::::
-
 3. **Add Sanity configuration**
 
-   `@nuxtjs/sanity` will look for a `sanity.json` file in your project root directory. Just copy over the `sanity.json` from your CMS - and you're fully configured!
-
-   Alternatively, you can pass in an object in your Nuxt config with key details.
+   This module will look for a `sanity.json` file in your project root directory. You can copy this over from your CMS - and you're fully configured! Alternatively, you can pass in an object in your Nuxt config with key details.
 
    ```js{}[nuxt.config.js]
-   {
+   import { defineNuxtConfig } from 'nuxt3'
+
+   export default defineNuxtConfig({
+     modules: ['@nuxtjs/sanity'],
      sanity: {
        projectId: 'myProject'
      }
-   }
+   })
    ```
 
    :::alert{type="info"}
@@ -69,31 +61,3 @@ description: 'Access text, images, and other media with Nuxt and the Sanity head
 
    Check out [how to use Sanity](/getting-started/usage).
 
-## TypeScript
-
-`@nuxtjs/sanity` offers type definitions. Just add an entry in `tsconfig.json`.
-
-:::::code-group
-::::code-block{label="Nuxt 2.9+" active}
-
-```json{}[tsconfig.json]
-{
-  "compilerOptions": {
-    "types": ["@nuxt/types", "@nuxtjs/sanity"]
-  }
-}
-```
-
-::::
-::::code-block{label="Nuxt < 2.9"}
-
-```json{}[tsconfig.json]
-{
-  "compilerOptions": {
-    "types": ["@nuxt/vue-app", "@nuxtjs/sanity"]
-  }
-}
-```
-
-::::
-:::::

docs/pages/en/1.getting-started/2.configuration.md

@@ -17,12 +17,15 @@ By default, `@nuxtjs/sanity` will look for a `sanity.json` file in your project
 If you need to provide additional configuration, you can pass in an object in your Nuxt config with key details:
 
 ```js{}[nuxt.config.js]
-{
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/sanity'],
   sanity: {
     projectId: 'myProject',
     apiVersion: '2021-10-18'
   },
-}
+})
 ```
 
 ## Runtime configuration
@@ -32,7 +35,10 @@ It is also possible to pass options to this module through [runtime configuratio
 For example:
 
 ```js{}[nuxt.config.js]
-{
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/sanity'],
   privateRuntimeConfig: {
     sanity: {
       token: process.env.SANITY_TOKEN,
@@ -41,11 +47,18 @@ For example:
   sanity: {
     projectId: 'myProject',
   },
-}
+})
 ```
 
 ## Reference
 
+### `globalHelper`
+
+- Type: **boolean**
+- Default: **false**
+
+Whether to provide a global `$sanity` helper that you can use throughout your project. (It's recommended not to do this but to use the `useSanity` and `useSanityQuery` composables.)
+
 ### `projectId`
 
 - **Required**
@@ -96,24 +109,6 @@ Use an ultra-minimal Sanity client for making requests (a fork of [picosanity](h
 If you don't have `@sanity/client` installed, then `@nuxtjs/sanity` will use the minimal client by default.
 :::
 
-### `imageHelper`
-
-- Type: **boolean**
-- Default: **`true`**
-
-Add a global `<SanityImage>` component to assist with URL transformations. See [the docs](/helpers/images) for more information.
-
-If you have `components: true` set in your `nuxt.config` file, then this option has no effect and this helper will be registered with `@nuxt/components` and imported only where needed, rather than registered globally.
-
-### `contentHelper`
-
-- Type: **boolean**
-- Default: **`true`**
-
-Add a global `<SanityContent>` component to display portable text. See [the docs](/helpers/portable-text) for more information.
-
-If you have `components: true` set in your `nuxt.config` file, then this option has no effect and this helper will be registered with `@nuxt/components` and imported only where needed, rather than registered globally.
-
 ### `disableSmartCdn`
 
 - Type: **boolean**
@@ -139,18 +134,16 @@ The options that can be provided are:
 So, for example:
 
 ```js{}[nuxt.config.js]
-{
-  // ...
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/sanity'],
   sanity: {
     additionalClients: {
       another: {
         projectId: 'anotherproject',
       },
     },
   },
-}
+})
 ```
-
-:::alert
-Because these clients will be accessible directly off the `$sanity` helper, take care not to name them `client`, `fetch` or `setToken`, or they will conflict with the default client properties.
-:::