nuxt-modules / sanity Goto Github PK

New exports module imports e.g. @nuxtjs/sanity/sanity-content weren't correctly resolving - reported in #51 (comment)

This was also breaking global registration of these components.

Version

module: 0.6.2
nuxt: 2.14.12

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'sanity-test',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    '@nuxtjs/sanity',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},

  // Sanity Configuration:
  sanity: {
    projectId: 'vgw104pb',
  },
}

Reproduction

Links:

• https://sad-heyrovsky-54a894.netlify.app/
• https://github.com/abdulrauf11/sanity-test

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Steps to reproduce

1. Open the site link: https://sad-heyrovsky-54a894.netlify.app/ on Safari.
2. View the console to see this error: SyntaxError: Invalid regular expression: invalid group specifier name

You can also test the GitHub repo locally.

Not sure if this is relevant but you can look at the sanity studio repo here: https://github.com/abdulrauf11/sanity-kitchen-sink/tree/main/studio

What is actually happening?

I've installed the module and copied the sanity.json to the root folder. All works well with a public dataset.
When I change it to private it breaks (obviuosly) but I'm having trouble finding where to put the sanity project read token ..
Could you please show me how it is done?

Thanks

Is your feature request related to a problem? Please describe.

Hi! is there a possibility to add a component also for Files? like the SanityImage component (https://github.com/nuxt-community/sanity-module/blob/main/src/components/sanity-image.ts)

Describe the solution you'd like to see

I think that it will be the same component (without transformation parameters) because if I use the slot the src in the scope is correct except for the basePath (https://github.com/nuxt-community/sanity-module/blob/main/src/components/sanity-image.ts#L6) that is files instead images

Describe alternatives you've considered

Nothing

Additional context

So maybe also for attachments or video you can do something like:

<SanityMedia>
  <template #default="{ src }">
     <a :href="src> Download </a>
  </template>
</SanityMedia>

Hi! It's me, again 😋

sanity-blocks-vue-component supports the serializers.hardBreak property, with <br> being the default.

It would be great if SanityContent also supported that property. Currenty it just ignores those marks:

marks: Array(0)
text: "↵"
_key: "6c949c8c6b872"
_type: "span"

Cheers!

Version

module: 0.8.0
nuxt: 2.15.3

Nuxt configuration

mode:

• [ x ] universal
• spa

Reproduction

⚠️ without a minimal reproduction we wont be able to look into your issue

The first bullet of my list is appearing as a <li> outside of my code using SanityContent component when it is the first thing inside the box.

My sanity document field is:

{ name: 'test', type: 'array', of: [ {type: 'block'} ] },

My nuxt implementation is: (where c is my page content)

<SanityContent :blocks="c.test" />

In a basic test, where I have three bullet points, the blocks return the following JSON:

[ { "_key": "1c6db3700c85", "_type": "block", "children": [ { "_key": "2ceb3af83031", "_type": "span", "marks": [], "text": "one" } ], "level": 1, "listItem": "bullet", "markDefs": [], "style": "normal" }, { "_key": "2225fa05c5ca", "_type": "block", "children": [ { "_key": "5e58e5f761fe", "_type": "span", "marks": [], "text": "two" } ], "level": 1, "listItem": "bullet", "markDefs": [], "style": "normal" }, { "_key": "17c1b0f23100", "_type": "block", "children": [ { "_key": "60921bf5a711", "_type": "span", "marks": [], "text": "three" } ], "level": 1, "listItem": "bullet", "markDefs": [], "style": "normal" } ]

This outputs in the DOM as the following:

<div><li>one</li><ul><li>two</li><li>three</li></ul></div>

As you can see, the first item isn't in the <ul> as it should be. It should of returned:

<div><ul><li>one</li><li>two</li><li>three</li></ul></div>

However, if I add something before my list, then it works as expected. So I have added 'This is a line of text' above the list in the portable content editor and now my SanityContent component returns the following:

<div><p>This is a line of text</p><ul><li>one</li><li>two</li><li>three</li></ul></div>

So it's only an issue when a bullet list is the first thing inside the portable content block.

Version

module: v0.9.2
nuxt: v2.15.6

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

Installed nuxt v2.15.6 with the module @sanity/nuxtjs v0.9.2

Reproduction

When using <SanityContent :blocks="content" /> the "quote" from sanity portable text is not being rendered.

What is expected?

SanityContent should render the quote as <blockquote>text here</blockquote>

What is actually happening?

Renders without html tags

Steps to reproduce

1. Install nuxt js v2.15.6 with the module @sanity/nuxtjs v0.9.2
2. Create a type block in Sanity and add a Quote to some piece of text
3. Make a GROQ query to your sanity studio API and print the block content with the <SanityContent :blocks="content" />

Additional information

I think the missing quote is missing as you can see in this part of the code https://github.com/nuxt-community/sanity-module/blob/72bf8cbf9cd42009008b0d65264448ca6234e43c/src/components/sanity-content.ts#L69

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Thank you

Hey Guys,

I tried to use the SanityContent with the custom annotation for internal/external links (https://github.com/sanity-io/sanity-recipes/blob/20fd5f72c65aecdce8d102a165825ef4294ecd8d/examples/links-in-portabletext/portableText.js#L46) but the internal anchor just renders as simple span and the external one as a span with href.

Any tips on how SanityContent component can be updated to support it? Thanks for any help on this.

Additionally any way to support <nuxt-link>'s?

@load="" won't trigger in safari v13, works fine in safari v14 (and other browsers).
I'm using $urlFor like this

<template>
<img
    class="logo" 
    loading="lazy" 
    :src="$urlFor(s.logo.asset).size(200).url()" 
    :alt="s.title"
    @load="loaded"
    width="auto"
    height="100%"
>
</template>

<script>
export default {
    methods: {
        loaded(e) {
            e.target.style.visibility = "visible"
            e.target.style.opacity = 1
        }
    },
}
</script>

Any idea what's going on?

Is your feature request related to a problem? Please describe.

When using hard break (shift+enter) in portable text, a newline \n character is added.
Those newlines characters are kept in the HTML, but are ignored when rendered by the SanityContent component.

This is actually the default behavior of HTML/CSS. Adding white-space: pre-line solves the issue.
However I think that hardbreaks should by default render a new line, because this is how it looks in portable editors. I'm curious to hear opinions about this.

Describe the solution you'd like to see

The block-content-to-hyperscript library converts newline characters into <br />. It also let the the developer decide how to handle newline characters by passing their own function. Or to pass false, to keep newline characters, which is the current behavior of SanityContent.

Describe alternatives you've considered

Let the developers add white-space: pre-line when using SanityContent. Maybe this is the cleanest solution?

I'm working on a pull request, taking the hyperscript library as a model, but I have a hard time to figure out how to implement that logic, starting with where that logic should reside in sanity-content.ts. Looking at the code of the hyperscript library, I'm also confusing at that statement span === '\n'. (Are all newlines divided into spans of text beforehand?🤔)

And I have a question about development of this module:
When running yarn dev and making changes to sanity-content.ts, changes are not reflected. Instead I need to stop the developing server, run yarn build and then restart the server with yarn dev. If I make changes directly to dist/sanity-content.js, changes are reflected upon saving. Is this the normal development workflow?
I can see some alias in nuxt.config.js that point to the TS files in src.

Is your feature request related to a problem? Please describe.

Sometimes you want to be able to configure multiple sanity clients that each have their respective uses, like one configured specifically to be used as a listener, or one configured to a specific project and/or dataset.

Describe the solution you'd like to see

In nuxt.config.js, the sanity config could also accept an array of client configs instead of only an object. This would follow a pattern I think is in other Nuxt plugins (it's been a while since I was nuxting, so I'm not sure if I remember correctly).

Describe alternatives you've considered

Going around the plugin and setting up multiple clients manually.

Additional context

Hey! It's me again 😁

I'm using the minimal client inside nuxt.config.js in order to fetch all the routes at build time. I followed the approach you described here: #3

// for minimal client
import { createClient } from '@nuxtjs/sanity'

const client = createClient({
  projectId: 'xxxxxxx',
  useCdn: false,
})

But when calling client.fetch, I get the error fetch is not defined. At first, I thought it was the property fetch on the client object that was undefined, but it's actually the Fetch API that isn't defined.

I know that, in this case, the runtime is Node, but I thought that the minimal client was isomorphic, because it works fine inside ayncData().
Also, I think that this used to work in previous versions of the module.

Right now Sanity module is added globally and it's a part of the main node_modules webpack chunk. It's more useful to be able to import it locally in components/pages. In the v1 it's the new default behaviour. It would be great to add it to the older v0.10.0 package that it's widely used in Nuxt 2 apps.

Given the module has been updated for Nuxt Bridge and Nuxt 3, it would be great to have the old docs online without the need to run them locally.

My Nuxt setup:

• mode: universal
• target: static

What I'm trying to do:

• make unauthenticated requests to sanity when generating the static files (don't need to get document drafts)
• make authenticated requests in preview mode (https://nuxtjs.org/docs/2.x/features/live-preview) where I do need to get any existing drafts, for preview

What I have so far (not working for what I need):

privateRuntimeConfig: {
    sanity: {
      token: process.env.SANITY_READ_TOKEN,
    },
  },

but this is no good because:

1. it includes the token client-side in the code - unsafe
2. it makes the nuxt generate fetch drafts too (authenticated request with token)

In the docs, I'm seeing a recommendation to get the token via a plugin:

export default async ({ req, $sanity }) => {
  const token = getTokenFromReq(req)
  $sanity.setToken(token)
}

But I don't understand how to get the token from the request? getTokenFromReq is not explained and I get I have to build that myself but how?
Do I need to pass the token as a URL parameter in the preview request? Like https://mysite.com/test/?preview=true&token=<mytoken>? If so, how would getTokenFromReq() look like? (I'm new to nuxt)

Thanks!

I'm using a query in nuxt.config.js to generate dynamic routes from Sanity content.
The code below works fine in v. 0.7.1. Stops working in 0.8.0 and above because the query is returning undefined, and nuxt generate fails as a consequence.

Version

module: 0.9.0, 0.8.0 (WORKS IN 0.7.1)
nuxt: 2.15.4

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

import { createClient } from "@nuxtjs/sanity";
import fetch from "node-fetch";
if (!globalThis.fetch) {
  globalThis.fetch = fetch;
}

if (!globalThis.fetch) {
  globalThis.fetch = fetch;
}
const configSanity = {
  projectId: "xxxxxxx",
  useCdn: false,
  minimal: true,
  dataset: "production"
};
// create sanity client 
const client = createClient(configSanity);

export default {
  target: "static",
  buildModules: [
    "@nuxtjs/sanity/module"
  ],

}
// GENERATE DYNAMIC PAGES FROM SANITY
  generate: {
    fallback: true,
    crawler: false,
    async routes() {
      // the pages  const below returns undefined in 0.8.0 and above. works fine in 0.7.1
      const pages = await client.fetch(`*[_type == "page"]`);
     
      return [
        ...pages.map(page => {
          return {
            route: `/${page.content.slug.current}/`,
            payload: page
          };
        })
      ];
    }
  },

What is expected?

await client.fetch(*[_type == "page"]); returns sanity content.

What is actually happening?

await client.fetch(*[_type == "page"]); returns undefined

Steps to reproduce

basic nuxt install with config adjusted as above

Additional information

This same code works fine in module version 0.7.1. Fails in 0.8.0 and above because the sanity query is not returning any data.

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

• context: nuxt/image#301, nuxt/image#164

Current docs: https://image.nuxtjs.org/providers/sanity/

Version

module: 0.7.1
nuxt: 2.15.3

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

Reproduction

⚠️ without a minimal reproduction we wont be able to look into your issue

Link:
[x] https://codesandbox.io/s/wizardly-thunder-xnwp3
[ ] GitHub repository

What is expected?

A message or warning that my dataset is not named by the default production

What is actually happening?

Nothing currently. If one fails to account for dataset name explicitly in the nuxt config and using the sanity.json file there is no indication as to why your queries will not load. Some helpful logging to remind us that our dataset is not named the same as default would be useful

Steps to reproduce

• In codesandbox look at page to show that it is in fact loading or not loading from Sanity.
• Comment / Uncomment line 11 in the nuxt.config.js file
• Check page to verify data is loading or not
• Verify there is no logging messages to indicate a differing dataset name
• Verify that it is configured correctly with exception of dataset property

Additional information

I was spinning my wheels for awhile wondering why my queries weren't working when there was seemingly nothing wrong with my configuration. Turns out the default dataset config of @nuxtjs/sanity did not match my sanity.json. Some logging around this would have saved a good amount of time.

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

What is expected?

You will see that there is no explicit indication by @nuxtjs/sanity that the dataset does not follow the default convention or is set to something other than default.

What is actually happening?

• NOT LOADING
  
  

• LOADING
  
  

Version

module: 0.9.0

Nuxt configuration

{
  buildModules: ['@nuxtjs/sanity']
}

Reproduction

Running yarn build with configuration currently on "Quick start" page.

Fatal Error is produced.

✖ Nuxt Fatal Error: TypeError: Module should export a function: @nuxtjs/sanity 

Additional information

Since version 0.8.0 configuration should look like this

{
  buildModules: ['@nuxtjs/sanity/module']
}

Can we write custom serializers using this module ?
Does <SanityContent/> component has serializers property ?
I would appreciate some help or example how to write one.
I was looking in Documentation and inside Example provided but i did not found something familiar.

Version

module: 0.3.9
nuxt: 2.14.6

Nuxt mode

mode:

• universal
• spa

Nuxt configuration

https://github.com/mornir/terminofeu-web/blob/dev/nuxt.config.js

Reproduction

https://github.com/mornir/terminofeu-web

Link:

• GitHub repository

What is expected?

The following warning is not shown when client is set to minimal: Warning: Module not found: Error: Can't resolve '@sanity/client'

What is actually happening?

Warning is shown regardless of minimal setting

Additional information

If the minimal key is missing, the warning is correct: " To disable this warning, set sanity: { minimal: true } in your nuxt.config.js."

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

When generating dynamic routes, I need the Sanity client to fetch all routes. Is there a way I can access the configured client in nuxt.config.js? Or do I need to import it and configure it again?

I can submit a PR 😃
I'll also link to the Sanity docs.

If my understanding is correct, Sanity recommends setting the current date to be sure to always be on the latest API version?

Hello,

Until I finish a demo project with this bug on the latest Nuxt version "nuxt": "2.15.0", and "@nuxtjs/sanity": "^0.7.0", has anyone seen this error:

ERROR in ./node_modules/@nuxtjs/sanity/dist/components/sanity-content.d.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: Debug Failure. Output generation failed
    at Object.transpileModule (/Users/temp/packages/web/corporate/node_modules/typescript/lib/typescript.js:129814:29)
    at getTranspilationEmit (/Users/temp/packages/web/corporate/node_modules/ts-loader/dist/index.js:390:75)
    at successLoader (/Users/temp/packages/web/corporate/node_modules/ts-loader/dist/index.js:38:11)
    at Object.loader (/Users/temp/packages/web/corporate/node_modules/ts-loader/dist/index.js:23:5)
 @ ./node_modules/.cache/nuxt/components/plugin.js 9:11-11:5 16:9-18:3
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

ERROR in ./node_modules/@nuxtjs/sanity/dist/components/sanity-image.d.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: Debug Failure. Output generation failed
    at Object.transpileModule (/Users/temp/packages/web/corporate/node_modules/typescript/lib/typescript.js:129814:29)
    at getTranspilationEmit (/Users/temp/packages/web/corporate/node_modules/ts-loader/dist/index.js:390:75)
    at successLoader (/Users/temp/packages/web/corporate/node_modules/ts-loader/dist/index.js:38:11)
    at Object.loader (/Users/temp/packages/web/corporate/node_modules/ts-loader/dist/index.js:23:5)
 @ ./node_modules/.cache/nuxt/components/plugin.js 34:9-36:3 40:9-42:3
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

package.json

{
  "name": "@unilever/web-corporate",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts -m=client",
    "build": "nuxt-ts build -m=client",
    "start": "nuxt-ts start -m=client",
    "generate": "nuxt-ts generate -m=client"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.1",
    "@nuxtjs/axios": "^5.13.1s",
    "@nuxtjs/proxy": "^2.1.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sanity": "^0.7.0",
    "@sanity/image-url": "^0.140.22",
    "axios-cache-adapter": "^2.7.0",
    "nuxt": "2.15.0",
    "nuxt-property-decorator": "^2.9.1",
    "nuxt-purgecss": "^1.0.0",
    "sanity-blocks-vue-component": "^0.1.0",
    "vue-lazy-hydration": "^2.0.0-beta.4",
    "vue-meta": "^2.4.0"
  },
  "devDependencies": {
    "@babel/runtime-corejs3": "^7.12.13",
    "@nuxt/types": "2.15.0",
    "@nuxt/typescript-build": "^2.0.4",
    "@nuxtjs/style-resources": "^1.0.0",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@testing-library/vue": "^5.6.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "core-js": "^3.8.3",
    "fibers": "^5.0.0",
    "jest": "^26.6.3",
    "jest-serializer-vue": "^2.0.2",
    "sass": "^1.32.7",
    "sass-loader": "10.1.1",
    "ts-jest": "^26.5.1",
    "vue-jest": "^4.0.0-rc.1"
  },
}

nuxt.config.js (for reference not the actual file)

export default {
  target: 'static',

  plugins: [
    '~/plugins/sanity-image-builder.ts',
    '~/plugins/sanity-content.ts',
    '~/plugins/axios-hook-injection.server.ts',
    '~/plugins/preview.client.ts',
    '~/plugins/vue-directives.ts',
  ],

  components: [
    {
      path: '~/components',
      ignore: ['**/__mocks__/*.*', '**/__tests__/*.*']
    }
  ],

  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/stylelint-module',
    '@nuxtjs/sanity',
    '@nuxtjs/axios',
  ],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/style-resources',
  ],

  axios: {},

  proxy: {},

  content: {},

  build: {
    corejs: 3,
    extractCSS: true,
    optimizeCSS: true,
    splitChunks: {
      layouts: true,
      pages: true,
      commons: true,
    },
    optimization: {
      runtimeChunk: true,
    },
    babel: {
      presets({ envName }) {
        const envTargets = {
          client: { browsers: ['last 2 versions'], ie: 11 },
        };
        return [
          [
            '@nuxt/babel-preset-app',
            {
              targets: envTargets[envName],
              corejs: { version: 3 },
            },
          ],
        ];
      },
    },
    parallel: true,
    terser: false,
  },

  sanity: {
    projectId: process.env.SANITY_PROJECTID,
    dataset: process.env.SANITY_DATASET,
    token: process.env.SANITY_TOKEN,
    minimal: true,
    contentHelper: true,
    additionalClients: {
      previewClient: {
        withCredentials: true,
        useCdn: false,
      },
    },
  },
};

Works fine if I add "@nuxtjs/sanity": "0.6.1", back right before types were added.

Version

module: 0.10.0
nuxt: 2.15.7

Nuxt configuration

mode:

• [ x ] universal
• spa

What is expected?

my post can show image

What is actually happening?

SanityContent can render tag HTML , but src not render

Steps to reproduce

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

I'm trying to run this package on a project and have been running into this error:
✖ Nuxt Fatal Error │
│
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './module' is not defined by "exports" in
.../node_modules/@nuxtjs/sanity/package.json

I have tried many different versions of node, npm and nuxt with no success. I am unable to use Nuxt 3 as it is for a project that requires stability.

Here are my dependencies in package.json:

and how I have it configured in nuxt.config.js:

Does anyone have a solution to this? It's driving me crazy.

I would often open the GitHub repo through this link. Is it possible to add it back, along with the version number? Exactly like on https://tailwindcss.nuxtjs.org/

I can submit a PR if you're okay with this change.

Is your feature request related to a problem? Please describe.

When I use nuxt preview mode, the client will refresh data with cdn API and data is not refreshed.

Describe the solution you'd like to see

I noticed that there is no way to invalidate cdn api / or change it's endpoint (from cdnUrl to hostUrl) when is into preview mode.

Describe alternatives you've considered

How about invalidate cache or switch to no-cdn mode when preview=true?

Here to help,

L.

EDIT:

an idea could be adding a parameter to fetch that can define if we are in preview or not

For any block content from sanity, if the block content contains <strong> marks (bold text) Nuxt will throw a warning in development (browser console):

vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ''. This may cause an update error.

found in

---> <SanityContent>

In my component, all I do is:

<SanityContent  :blocks="blocktext"  />

where blocktext is the block content from Sanity.
The text renders ok in the front-end though.

Why is this happening? Am I doing something wrong?

Version

module: 0.9.0 (and previously 0.7.1)
nuxt: 2.15.5

Is your feature request related to a problem? Please describe.

If I use this module with @nuxt/bridge it throws an error:

TypeError: nuxtCtx.set is not a function

Describe the solution you'd like to see

No error on dev command

Describe alternatives you've considered

Additional context

I runned yarn why @nuxt/kit and noticed this message:

=> Found "@nuxtjs/sanity#@nuxt/[email protected]"
info This module exists because "@nuxtjs#sanity" depends on it.

refer to nuxt/bridge#238

Thank you!

Not sure if this is the place to request this or not, but now that @nuxt/vite is a thing, it would be amazing to see this package add support! Please and thank you!

Currently the build crashes and emits this error:

 ERROR  fetch is not defined                                                            22:26:58

  at Object.fetch (node_modules/@nuxtjs/sanity/dist/index.js:47:12)
  at Object.fetch (server.js:2057:24)
  at asyncData (server.js:3349:27)
  at promisify (server.js:574:15)
  at server.js:2510:23
  at Array.map (<anonymous>)
  at server (server.js:2507:51)

When using Nuxt in SPR mode, like …

export default {
	ssr: true,
	target: 'static',
	…
}

(in nuxt.config.js)

… and using Sanity with useCdn: true, content is not immediately updated, when running/triggering nuxt generate/npm run generate.

Fyi: At the Sanity dashboard you can configure web hooks, that are triggered when content changes. So usually you would trigger nuxt generate at this place.

The problem is: When using useCdn: true, we’ll get a cached response, that is not up to date. This is why we need to achieve useCdn being set to false while generating.

Overriding useCdn inside privateRuntimeConfig will solve the problem.

sanity: {
	projectId: process.env.SANITY_PROJECT_ID,
	dataset: 'production',
	useCdn: true,
},

privateRuntimeConfig: {
	sanity: {
		useCdn: false,
	},
},

(in nuxt.config.js)

So I was wondering why this isn’t the default behaviour?
Or at least add this to the docs?

Hi!

This looks like an interesting project. I'm just curious if there is the possibility to use GQL instead of GROQ since it is supported by Sanity?

Hello, I am trying to update to 0.9.4 but there is no npm page anymore for the package:

https://www.npmjs.com/package/@nuxtjs/sanity

What's happened?

Thank you in advice! :)

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (:automergeEarlyMondays). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Hey!
I was hoping I could use the createClient to configure the client for the @sanity/image-url package, but it doesn't work 🤔
What the best/cleanest of using @sanity/image-url with the Nuxt sanity-module?

// Nuxt plugin
import imageUrlBuilder from '@sanity/image-url'
import { createClient } from '@nuxtjs/sanity'

const configSanity = {
  projectId: 'tufjlt9c',
  dataset: 'production',
}

const client = createClient(configSanity)
const builder = imageUrlBuilder(client)

function urlFor(source) {
  return builder.image(source)
}

export default (context, inject) => {
  inject('urlFor', urlFor)
}

<img :src="$urlFor(movie.poster)" :alt="movie.title + ' poster'" />

When nesting lists, multiple issues occur:

1. When defining multiple lists with different list-styles without an empty line between, the plugin produces one merged list, that includes all the elements.

Screenshot of Sanity Studio:

Screenshot of website (rendered Content):

When adding an empty line, it works (screenshot of Sanity Studio):

With the empty line, it is rendered correctly (screenshot of website):

This is caused by the walkList method in sanity-content.ts. The check if the last block was already a list does only check the levels, but not the listItem property from sanity, which we get like this (screenshot of Vision extension of Santiy Studio):

2. Multi level lists are not working correctly. Things like the following are not rendered correctly:

Special care should be taken to produced wellformed HTML code:

• How to write W3C compliant multi-level bullet points in HTML?
• Proper way to make HTML nested list?
• Add style to multi-level UL : ul « Tags « HTML / CSS

Additionally, it should be taken care of the list implementation in Sanity Studio so that the editor and the rendered HTML show at least similar behavior - expect a few bugs in the Studio like sanity-io/sanity#1338.

Version

module: 0.10.0
nuxt: 2.15.8

Nuxt configuration

• universal
• spa

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Hello there, this is a great plugin and a lot of respect for that.
I have a short question where I'm exploring the new Nuxt 3 beta.
Is it possible to use this plugin in Nuxt 3 now ?
Has anyone have some example to share ?

If sanity config is defined in sanity.json and not nuxt.config.js, npm run generate/build fails with:

TypeError: Cannot read property 'token' of undefined

Adding the below to nuxt.config.js fixes this.

sanity: {},

Hi!
I've just updated to v0.4.0 and the helpers are no longer globally imported even though that I set components: true. Do I need to write more config for it to work?

Reproduction: https://github.com/mornir/movies-web

Property $sanity does not exist on type 'Context'.

tsconfig.json compilerOptions:

"types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/sanity"
    ]

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency @sanity/preview-url-secret to v1.6.12
• chore(deps): update dependency @sanity/visual-editing to v1.8.18
• chore(deps): update devdependency @nuxt/eslint-config to v0.3.12
• chore(deps): update devdependency @vue/runtime-core to v3.4.27
• chore(deps): update nuxt core (@nuxt/kit, @nuxt/schema, @nuxt/test-utils, nuxt, vue)
• chore(deps): update react monorepo to v18.3.1 (@types/react, react, react-dom)
• chore(deps): update test packages (@vitest/coverage-v8, happy-dom, vitest)
• chore(deps): lock file maintenance

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency styled-components to v6.1.11
• chore(deps): update devdependency @vue/test-utils to v2.4.6
• chore(deps): update devdependency bumpp to v9.4.1
• chore(deps): update devdependency vue-router to v4.3.2
• chore(deps): update devdependency vue-tsc to v2.0.16
• chore(deps): update pnpm to v8.15.8
• chore(deps): update resolutions nuxt-component-meta to v0.6.4
• chore(deps): update dependency @sanity/client to v6.18.0
• chore(deps): update dependency mlly to v1.7.0
• chore(deps): update dependency react-icons to v5.2.1
• chore(deps): update devdependency eslint to v9.2.0
• chore(deps): update pnpm to v9
• 🔐 Create all rate-limited PRs at once 🔐

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update sanity monorepo to v3.41.1 (@sanity/vision, sanity)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @sanity/core-loader to v1.6.12

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Version

module: 0.9.1
nuxt: ^2.15.3

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

Static generation

Reproduction

Custom components for custom types will work in dev mode, but will not generate for static.

What is expected?

Custom block types should be created in static site generation, just like dev mode

What is actually happening?

Errors from any kind of asyncData or fetch happening on server to build site throwing up:

WARN  Cannot stringify a function String
WARN  Cannot stringify a function Object
WARN  Cannot stringify a function render
WARN  Cannot stringify a function hook
WARN  Cannot stringify a function VueComponent

Steps to reproduce

• Add @nuxtjs/sanity to a fresh Nuxt boilerplate
• Fetch sanity content that contains a custom type
• Confirm it works in dev mode
• Run nuxt generate && nuxt start
• You should see similar above errors and the custom components aren't rendered in pages

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

• using module template
• npm invitation
  • approve
  • assign team for
• transfer to nuxt-community/sanity-module
• publish docs as sanity.nuxtjs.org
• publish initial version of new package

Version

    "nuxt": "^2.14.6",
    "@nuxtjs/sanity": "^0.5.0",

Nuxt configuration

mode:

• [ x ] universal
• spa

Reproduction

in your console, if you run
'fpX'.replace(/[A-Z]./, (r) => "-" + r[1].toLowerCase()) the string 'fpX' is not converted to kebab case.
This is the regex from line 118 of sanity-image.js

What is expected?

it should return fp-x

What is actually happening?

it return fpX

for me, the impact of this is that focal points are not correctly set

Steps to reproduce

see above

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• [x ] I have tested with the latest module version and the issue still occurs
• [x ] I have searched the issue tracker and this issue hasn't been reported yet

replacing this with the below regex (from i'll admit, the first stackoverflow answer i came to) works for me.

.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()

Happy to submit a pull request if you agree this is a bug and not something i'm missing here. If so, I'll look properly at that regex and check it works in all the cases we can expect.

Thanks for this module, its enabled me to get up and running with Sanity in my nuxt project super fast.

Hello, how can I generate a sanity image url inside my template?
I use Snipcart and for each snipcart button, I want provide the a product image.

The component is ok for display an image, but how can I only generate the url?
Thanks.

Note: My sanity config is inside my nuxt.config.js file.

Describe the solution you'd like to see

The SanityContent component should be able to render images from sanity

Describe alternatives you've considered

Currently i solved it by adding custom serializer

See #51 and nuxt/components#111

I am very new to Sanity and Nuxt. I tried to set it up but get problems shown below.
I followed https://sanity.nuxtjs.org/getting-started/quick-start

Here are my deps.

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.7.0",
    "nuxt3": "latest",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.4"
  },
  "dependencies": {
    "@nuxtjs/composition-api": "^0.31.0",
    "@nuxtjs/sanity": "^1.1.1",
    "@nuxtjs/tailwindcss": "5.0.0-2",
    "@pinia/nuxt": "^0.1.8",
    "eslint-plugin-nuxt": "^3.1.0",
    "pinia": "^2.0.9",
    "sass": "^1.49.0"
  }

Hey there! Thank you for working on/maintaining this plugin. I am using it with Nuxt3 for a client project and everything is going well except for the fact that it doesn't seem to pick up my sanity.json file in my root directory... Instead I have to enter my sanity dataset in my nuxt.config.js:

sanity: {
  projectId: 'my-project-id',
  dataset: 'production'
}

This ends up working fine, but if I remove this and add in a sanity.json file I get the following error if I try and query anything such as title or image, etc.: Cannot read properties of undefined (reading 'title'). I am not sure whats going on 🤔

Version

module: "@nuxtjs/sanity": "^1.2.0"
nuxt: "nuxt": "3.0.0-rc.1"

What is expected?

My sanity.json dataset/projectId should be picked up by the plugin and the data should fetch without any errors

What is actually happening?

The sanity.json doesn't seem to be having any effect in my project. It could possibly be due to my directory structure, but it seems unlikely (my sanity.json lives within my /web folder:

/studio
/web

{
  "api": {
    "projectId": "sample-project-id",
    "dataset": "production"
  }
}