Skip to content

Commit 839ecd5

Browse files
committed
docs: nuxt module installation & usage
1 parent 7c3097e commit 839ecd5

File tree

1 file changed

+43
-1
lines changed

1 file changed

+43
-1
lines changed

README.md

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,21 @@ This package doesn't handle the communication with the API. Check out [notion-ap
5757
npm install vue-notion
5858
```
5959

60+
### NuxtJS Module
61+
```js
62+
// nuxt.config.js
63+
64+
export default {
65+
// ...
66+
buildModules: [
67+
'vue-notion/nuxt'
68+
]
69+
notion: {
70+
// additionals configuration
71+
}
72+
}
73+
```
74+
6075
## How To
6176

6277
### Docs
@@ -65,7 +80,7 @@ npm install vue-notion
6580
6681
More information on the `NotionRenderer` specification, syntax-highlighting, the Notion API, and integration with Nuxt can be found at [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs).
6782

68-
### Basic Example
83+
### Basic Example for Vue
6984

7085
This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
7186

@@ -95,6 +110,33 @@ export default {
95110
The example above uses a simple wrapper around the [notion-api-worker](https://github.com/splitbee/notion-api-worker).
96111
It is also possible to store and use plain `.json` objects received from the Notion API.
97112

113+
### Basic Example for Nuxt
114+
115+
This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
116+
117+
```vue
118+
<template>
119+
<NotionRenderer :blockMap="blockMap" fullPage />
120+
</template>
121+
122+
<script>
123+
export default {
124+
data: () => ({ blockMap: null }),
125+
async asyncData({ $notion }) {
126+
// use notion module to get Notion blocks from the API via a Notion pageId
127+
const blockMap = await $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
128+
129+
return { blockMap }
130+
},
131+
};
132+
133+
<style>
134+
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
135+
</style>
136+
```
137+
</script>
138+
139+
98140
> ⚠️ Use with caution.
99141
> The `getPageBlocks` and `getPageTable` are based on the private Notion API.
100142
> We can not gurantee it will stay stable.

0 commit comments

Comments
 (0)