New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

nuxt-jsonld

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-jsonld - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

dist/module.js

2

dist/module.d.ts

@@ -5,3 +5,3 @@ import * as _nuxt_schema from '@nuxt/schema';

declare type ModuleOptions = {
type ModuleOptions = {
disableOptionsAPI: boolean;

@@ -8,0 +8,0 @@ };

@@ -1,5 +0,5 @@

import * as _app from '#app';
import * as nuxt_app from 'nuxt/app';
declare const _default: _app.Plugin<Record<string, any>>;
declare const _default: nuxt_app.Plugin<Record<string, unknown>>;
export { _default as default };
{
"name": "nuxt-jsonld",
"version": "2.0.7",
"version": "2.0.8",
"description": "manage JSON-LD in Vue component.",

@@ -8,9 +8,13 @@ "repository": "ssh://git@github.com/ymmooot/nuxt-jsonld.git",

"license": "MIT",
"type": "module",
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"exports": {
".": {
"import": "./dist/module.mjs",
"types": "./dist/module.d.ts"
"types": "./dist/module.d.ts",
"default": "./dist/module.js"
}
},
"main": "dist/module.mjs",
"main": "dist/module.js",
"types": "dist/module.d.ts",

@@ -21,14 +25,5 @@ "files": [

"scripts": {
"build": "tsup",
"demo:dev": "nuxi dev example",
"demo:build": "yarn build && yarn nuxi build example",
"demo:start": "node example/.output/server/index.mjs",
"lint": "yarn lint:es && yarn lint:prettier",
"lint:es": "eslint --ext .js,.ts,.vue",
"lint:prettier": "prettier '**/*.{js,ts,vue,html,json,md,yml}' --check",
"lintfix": "yarn lint:es --fix && yarn lint:prettier --write",
"cy": "cypress",
"build": "nuxi prepare && tsup",
"test": "jest",
"test:ci": "jest --coverage && codecov",
"test:e2e": "cypress run --record --key 8f568853-b927-4858-9e2a-6af417990ad7",
"release:prepare": "shipjs prepare",

@@ -38,23 +33,19 @@ "release:trigger": "shipjs trigger"

"dependencies": {
"pathe": "^0.3.0",
"schema-dts": "^1.0.0"
"pathe": "^1.1.0",
"schema-dts": "^1.1.2"
},
"devDependencies": {
"@babel/preset-env": "^7.16.11",
"@nuxtjs/eslint-config-typescript": "^11.0.0",
"@types/jest": "^29.0.0",
"babel-jest": "^29.0.1",
"@nuxtjs/eslint-config-typescript": "^12.0.0",
"@types/jest": "^29.5.0",
"babel-jest": "^29.5.0",
"codecov": "^3.8.3",
"cypress": "^11.0.1",
"esbuild": "^0.15.3",
"esbuild": "^0.17.14",
"esbuild-jest": "^0.5.0",
"eslint": "^8.6.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^29.0.1",
"nuxt": "^3.0.0",
"prettier": "^2.5.1",
"shipjs": "0.24.4",
"tsup": "^6.0.1",
"typescript": "^4.5.4"
"jest": "^29.5.0",
"nuxt": "^3.4.1",
"prettier": "^2.8.7",
"shipjs": "0.26.1",
"tsup": "^6.7.0",
"typescript": "^5.0.2"
},

@@ -61,0 +52,0 @@ "keywords": [

@@ -13,171 +13,4 @@ # nuxt-jsonld

## Installation
```bash
$ yarn add nuxt-jsonld
# or
$ npm install nuxt-jsonld
```
```ts
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
modules: ['nuxt-jsonld'],
});
```
## Usage
### Composition API
You can call `useJsonld` with a json object.
Alternatively, you can pass a function for a reactive json, just as [`useHead`](https://v3.nuxtjs.org/guide/features/head-management/#usehead-composable) composable.
You can use `useJsonld` without importing, since it is provided as [Nuxt auto-imports functions](https://v3.nuxtjs.org/guide/concepts/auto-imports#nuxt-auto-imports).
Of course, you can import explicitly from `#jsonld`.
```vue
<script lang="ts" setup>
// You don't need to import explicitly.
// import { useJsonld } from '#jsonld';
// just pass a jsonld object for static jsonld
useJsonld({
'@context': 'https://schema.org',
'@type': 'Thing',
name: 'static json',
});
// pass a function which returns a jsonld object for reactive jsonld
const count = ref(0);
const countUp = () => {
count.value += 1;
};
useJsonld(() => ({
'@context': 'https://schema.org',
'@type': 'Thing',
name: `reactive json: count is ${count.value}`,
}));
</script>
```
### Options API
Make a jsonld method to your Vue components and return structured data object.
```vue
<script lang="ts">
import type { WithContext, ListItem } from 'schema-dts';
export default defineComponent({
data() {
return {
breadcrumbs: [
{
url: 'https://example.com',
text: 'top page',
},
{
url: 'https://example.com/foo',
text: 'foo',
},
{
url: 'https://example.com/foo/bar',
text: 'bar',
},
],
};
},
jsonld(): WithContext<ListItem> {
const items = this.breadcrumbs.map((item, index) => ({
'@type': 'ListItem',
position: index + 1,
item: {
'@id': item.url,
name: item.text,
},
}));
return {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: items,
};
},
});
</script>
```
## Options
### disableOptionsAPI
Options API `jsonld` method is implemented using global mixin.
You can disable it if you don't use it.
(default: `false`)
```ts
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
modules: ['nuxt-jsonld'],
'nuxt-jsonld': { disableOptionsAPI: true },
});
```
Or
```ts
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
modules: [['nuxt-jsonld', { disableOptionsAPI: true }]],
});
```
## Tips
### Hide JSON-LD
If you don't need JSON-LD tag, just return null.
```ts
useJsonld(() => {
if (!props.product) {
return null;
}
return {
'@context': 'https://schema.org',
'@type': 'Product',
name: this.product.name,
};
});
```
### Multiple JSON-LD from one component
You can return multiple json data as an array.
```js
[
{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
/* breadcrumb items*/
],
},
{
'@context': 'https://schema.org',
'@type': 'NewsArticle',
mainEntityOfPage: {
/* article info */
},
},
];
```
Or use `@graph` notation. [#247](https://github.com/ymmooot/nuxt-jsonld/issues/247#issuecomment-579851220)
Check more detail [here](https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc