nuxt-jsonld
Advanced tools
Comparing version 2.0.7 to 2.0.8
@@ -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": [ |
169
README.md
@@ -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) |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
17012
13
516
Yes
16
1
+ Addedpathe@1.1.2(transitive)
- Removedpathe@0.3.9(transitive)
Updatedpathe@^1.1.0
Updatedschema-dts@^1.1.2