nuxt-modules / sanity Goto Github PK
View Code? Open in Web Editor NEWSanity integration for Nuxt
Home Page: https://sanity.nuxtjs.org
License: MIT License
Sanity integration for Nuxt
Home Page: https://sanity.nuxtjs.org
License: MIT License
nuxt-community/sanity-module
sanity.nuxtjs.org
When I use nuxt preview mode, the client will refresh data with cdn API and data is not refreshed.
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.
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
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 π€
module: "@nuxtjs/sanity": "^1.2.0"
nuxt: "nuxt": "3.0.0-rc.1"
My sanity.json
dataset/projectId should be picked up by the plugin and the data should fetch without any errors
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"
}
}
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?
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?
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
module: 0.3.9
nuxt: 2.14.6
https://github.com/mornir/terminofeu-web/blob/dev/nuxt.config.js
https://github.com/mornir/terminofeu-web
Link:
The following warning is not shown when client is set to minimal: Warning: Module not found: Error: Can't resolve '@sanity/client'
Warning is shown regardless of minimal setting
If the minimal key is missing, the warning is correct: " To disable this warning, set sanity: { minimal: true } in your nuxt.config.js."
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?
module: 0.6.2
nuxt: 2.14.12
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',
},
}
Links:
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
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.
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.
module: 0.9.1
nuxt: ^2.15.3
Static generation
Custom components for custom types will work in dev mode, but will not generate for static.
Custom block types should be created in static site generation, just like dev mode
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
nuxt generate && nuxt start
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?
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.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
.github/workflows/ci.yml
actions/checkout v4
actions/setup-node v4
codecov/codecov-action v4
.github/workflows/release.yml
actions/checkout v4
actions/setup-node v4
docs/package.json
@nuxt-themes/docus 1.15.0
nuxt 3.12.4
package.json
@nuxt/kit ^3.12.4
@portabletext/types ^2.0.13
@sanity/client ^6.21.3
@sanity/core-loader ^1.6.22
@sanity/preview-url-secret ^1.6.20
@sanity/visual-editing ^2.1.9
chalk ^5.3.0
defu ^6.1.4
jiti ^1.21.6
knitwork ^1.1.0
magic-regexp ^0.8.0
mlly ^1.7.1
ofetch ^1.3.4
ohash ^1.1.3
pathe ^1.1.2
@nuxt/eslint-config 0.5.0
@nuxt/module-builder 0.8.3
@nuxt/schema 3.12.4
@nuxt/test-utils 3.14.1
@vitest/coverage-v8 2.0.5
@vue/test-utils 2.4.6
bumpp 9.5.1
eslint 9.9.0
h3 1.12.0
happy-dom 14.12.3
lint-staged 15.2.9
nuxi 3.12.0
nuxt 3.12.4
simple-git-hooks 2.11.1
typescript 5.5.4
vitest 2.0.5
vitest-environment-nuxt 1.0.1
vue 3.4.38
vue-router 4.4.3
vue-tsc 2.0.29
nuxt-component-meta 0.7.0
pnpm 9.7.1
playground/cms/package.json
prop-types 15.8.1
react 18.3.1
react-dom 18.3.1
react-icons ^5.3.0
sanity 3.54.0
styled-components ^6.1.12
@sanity/vision 3.54.0
@types/react 18.3.3
@types/styled-components 5.1.34
playground/package.json
nuxt 3.12.4
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"
}
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?
module: 0.9.0 (and previously 0.7.1)
nuxt: 2.15.5
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)
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.
module: 0.9.0, 0.8.0 (WORKS IN 0.7.1)
nuxt: 2.15.4
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
};
})
];
}
},
await client.fetch(
*[_type == "page"]);
returns sanity content.
await client.fetch(
*[_type == "page"]);
returns undefined
basic nuxt install with config adjusted as above
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.
Current docs: https://image.nuxtjs.org/providers/sanity/
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.
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: {},
Property $sanity does not exist on type 'Context'.
tsconfig.json compilerOptions:
"types": [
"@types/node",
"@nuxt/types",
"@nuxtjs/sanity"
]
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):
Special care should be taken to produced wellformed HTML code:
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.
module: 0.10.0
nuxt: 2.15.8
module: v0.9.2
nuxt: v2.15.6
Installed nuxt v2.15.6 with the module @sanity/nuxtjs v0.9.2
When using <SanityContent :blocks="content" />
the "quote" from sanity portable text is not being rendered.
SanityContent should render the quote as <blockquote>text here</blockquote>
Renders without html tags
<SanityContent :blocks="content" />
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
Thank you
module: 0.9.0
{
buildModules: ['@nuxtjs/sanity']
}
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
Since version 0.8.0
configuration should look like this
{
buildModules: ['@nuxtjs/sanity/module']
}
See #51 and nuxt/components#111
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!
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.
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.
module: 0.7.1
nuxt: 2.15.3
β οΈ without a minimal reproduction we wont be able to look into your issue
Link:
[x] https://codesandbox.io/s/wizardly-thunder-xnwp3
[ ] GitHub repository
A message or warning that my dataset is not named by the default production
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
11
in the nuxt.config.js
filedataset
propertyI 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.
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.
@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?
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?
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.
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
module: 0.8.0
nuxt: 2.15.3
β οΈ 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.
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)
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
Nothing
So maybe also for attachments or video you can do something like:
<SanityMedia>
<template #default="{ src }">
<a :href="src> Download </a>
</template>
</SanityMedia>
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'" />
If I use this module with @nuxt/bridge it throws an error:
TypeError: nuxtCtx.set is not a function
No error on dev command
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!
My Nuxt setup:
What I'm trying to do:
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:
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!
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.
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.
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.
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
.
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.
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.
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! :)
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.
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).
Going around the plugin and setting up multiple clients manually.
module: 0.10.0
nuxt: 2.15.7
my post can show image
SanityContent can render tag HTML , but src not render
"nuxt": "^2.14.6",
"@nuxtjs/sanity": "^0.5.0",
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
it should return fp-x
it return fpX
for me, the impact of this is that focal points are not correctly set
see above
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 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 ?
The SanityContent component should be able to render images from sanity
Currently i solved it by adding custom serializer
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.