Skip to content

Commit 67fdbb4

Browse files
janniksjanniks
authored
Merge pull request #13 from janniks/add-nuxt-module-v3
Add nuxt module
2 parents 91a527c + a77af30 commit 67fdbb4

File tree

13 files changed

+195
-86
lines changed

13 files changed

+195
-86
lines changed

‎.gitignore‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
yarn.lock
12

2-
# Created by https://www.toptal.com/developers/gitignore/api/macOS,Node,Vuejs,Vue
3-
# Edit at https://www.toptal.com/developers/gitignore?templates=macOS,Node,Vuejs,Vue
3+
# Created by https://www.toptal.com/developers/gitignore/api/yarn,Vuejs,Vue,Node,macOS
4+
# Edit at https://www.toptal.com/developers/gitignore?templates=yarn,Vuejs,Vue,Node,macOS
45

56
### macOS ###
67
# General
@@ -159,4 +160,20 @@ dist/
159160
npm-debug.log
160161
yarn-error.log
161162

162-
# End of https://www.toptal.com/developers/gitignore/api/macOS,Node,Vuejs,Vue
163+
### yarn ###
164+
# https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored
165+
166+
.yarn/*
167+
!.yarn/releases
168+
!.yarn/plugins
169+
!.yarn/sdks
170+
!.yarn/versions
171+
172+
# if you are NOT using Zero-installs, then:
173+
# comment the following lines
174+
!.yarn/cache
175+
176+
# and uncomment the following lines
177+
# .pnp.*
178+
179+
# End of https://www.toptal.com/developers/gitignore/api/yarn,Vuejs,Vue,Node,macOS

‎README.md‎

Lines changed: 89 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<span> · </span>
99
<a href="#install">Install</a>
1010
<span> · </span>
11-
<a href="#basic-example">Example</a>
12-
<span> · </span>
1311
<a href="#docs">Docs</a>
1412
<span> · </span>
13+
<a href="#examples">Examples</a>
14+
<span> · </span>
1515
<a href="#credits">Credits</a>
1616
</h3>
1717

@@ -49,25 +49,48 @@ This package doesn't handle the communication with the API. Check out [notion-ap
4949

5050
🔮 **Syntax-Highlighting** – Beautiful themeable code highlighting using Prism.js
5151

52-
🌎 **SSR / Static Generation Support** – Functions to work with Nuxt and other frameworks
52+
🌎 **SSR / Static Generation Support** – Functions to work with NuxtJS and other frameworks
5353

5454
## Install
5555

56+
### Vue
57+
5658
```bash
5759
npm install vue-notion
5860
```
5961

60-
## How To
62+
### NuxtJS Module
63+
64+
Install as shown above and add `"vue-notion/nuxt"` to the `buildModules` array in `nuxt.config.js`.
65+
66+
```js
67+
// nuxt.config.js
68+
export default {
69+
// ...
70+
buildModules: ["vue-notion/nuxt"],
71+
};
72+
```
73+
74+
## Docs
6175

62-
### Docs
76+
<!-- todo: add # links to doc links -->
6377

64-
> Check out a demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨
78+
- `NotionRenderer`: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs)
79+
- Syntax Highlighting in Code Blocks (with Prism.js): [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs)
80+
- Notion API: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs)
81+
- Nuxt: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs)
6582

66-
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).
83+
> Check out a full working demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨
84+
> The code for the demo is in [`example/`](https://github.com/janniks/vue-notion/tree/main/example).
6785
68-
### Basic Example
86+
## Examples
6987

70-
This example is hosted at [vue-notion.now.sh/welcome](https://vue-notion.now.sh/welcome).
88+
These examples use a simple wrapper around the [`notion-api-worker`](https://github.com/splitbee/notion-api-worker).
89+
It is also possible to store a page received from the Notion API in `.json` and use it without the `async/await` part.
90+
91+
### Basic Example for Vue
92+
93+
This example is a part of [`example/`](https://github.com/janniks/vue-notion/tree/main/example) and is hosted at [vue-notion.now.sh/vue](https://vue-notion.now.sh/vue).
7194

7295
```vue
7396
<template>
@@ -92,17 +115,39 @@ export default {
92115
</style>
93116
```
94117

95-
The example above uses a simple wrapper around the [notion-api-worker](https://github.com/splitbee/notion-api-worker).
96-
It is also possible to store and use plain `.json` objects received from the Notion API.
118+
### Basic Example for NuxtJS
119+
120+
This example is a part of [`example/`](https://github.com/janniks/vue-notion/tree/main/example) and is hosted at [vue-notion.now.sh/nuxt](https://vue-notion.now.sh/nuxt).
121+
122+
```vue
123+
<template>
124+
<NotionRenderer :blockMap="blockMap" fullPage />
125+
</template>
97126
98-
> ⚠️ Use with caution.
127+
<script>
128+
export default {
129+
data: () => ({ blockMap: null }),
130+
async asyncData({ $notion }) {
131+
// use Notion module to get Notion blocks from the API via a Notion pageId
132+
const blockMap = await $notion.getPageBlocks(
133+
"8c1ab01960b049f6a282dda64a94afc7"
134+
);
135+
return { blockMap };
136+
},
137+
};
138+
</script>
139+
140+
<style>
141+
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
142+
</style>
143+
```
144+
145+
> ⚠️ Use with caution!
99146
> The `getPageBlocks` and `getPageTable` are based on the private Notion API.
100-
> We can not gurantee it will stay stable.
147+
> We can NOT guarantee that it will stay stable.
101148
> The private API is warpped by [notion-api-worker](https://github.com/splitbee/notion-api-worker).
102149
> If you use these methods a lot, please consider hosting you own instance, as described in [`docs#notion-api`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api).
103150
104-
A [full working example using Nuxt and static generation](https://vue-notion.now.sh/) can be found inside the `example` directory.
105-
106151
## Roadmap
107152

108153
[Add issues](https://github.com/janniks/vue-notion/issues/new), request features and upvote [block types](https://github.com/janniks/vue-notion/issues?q=is%3Aissue+is%3Aopen+label%3Ablock) that you want to see next!
@@ -118,42 +163,45 @@ List of pages that are using this library.
118163

119164
Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
120165

121-
| Block Type | Supported | Notes |
122-
| ----------------- | -------------- | ------------------------ |
123-
| Text | ✅ Yes | |
124-
| Heading | ✅ Yes | |
125-
| Image | ✅ Yes | |
126-
| Image Caption | ✅ Yes | |
127-
| Bulleted List | ✅ Yes | |
128-
| Numbered List | ✅ Yes | |
129-
| Quote | ✅ Yes | |
130-
| Callout | ✅ Yes | |
131-
| Column | ✅ Yes | |
132-
| iframe | ✅ Yes | |
133-
| Video | ✅ Yes | Only embedded videos |
134-
| Divider | ✅ Yes | |
135-
| Link | ✅ Yes | |
136-
| Code | ✅ Yes | |
137-
| Web Bookmark | ✅ Yes | |
138-
| Toggle List | ✅ Yes | |
139-
| Page Links | ✅ Yes | |
140-
| Cover | ✅ Yes | Enable with `fullPage` |
141-
| Databases | ❌ Not planned | |
142-
| Checkbox | ❌ Not planned | |
143-
| Table Of Contents | ❌ Not planned | |
144-
145-
Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issues/new) if you notice any missing blocks or anything wrong with existing blocks.
166+
| Block Type | Supported | Notes |
167+
| ----------------- | -------------- | ---------------------- |
168+
| Text | ✅ Yes | |
169+
| Heading | ✅ Yes | |
170+
| Image | ✅ Yes | |
171+
| Image Caption | ✅ Yes | |
172+
| Bulleted List | ✅ Yes | |
173+
| Numbered List | ✅ Yes | |
174+
| Quote | ✅ Yes | |
175+
| Callout | ✅ Yes | |
176+
| Column | ✅ Yes | |
177+
| iframe | ✅ Yes | |
178+
| Video | ✅ Yes | Only embedded videos |
179+
| Divider | ✅ Yes | |
180+
| Link | ✅ Yes | |
181+
| Code | ✅ Yes | |
182+
| Web Bookmark | ✅ Yes | |
183+
| Toggle List | ✅ Yes | |
184+
| Page Links | ✅ Yes | |
185+
| Cover | ✅ Yes | Enable with `fullPage` |
186+
| Equations | ✅ Planned | |
187+
| Databases | ❌ Not planned | |
188+
| Checkbox | ❌ Not planned | |
189+
| Table Of Contents | ❌ Not planned | |
190+
191+
Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issues/new) if you notice any important blocks missing or anything wrong with existing blocks.
146192

147193
## Credits
148194

149195
- [Jannik Siebert](https://twitter.com/jnnksbrt) – vue-notion Code
150196
- [Dominik Sobe](https://twitter.com/sobedominik) – vue-notion Inspiration, Debugging
197+
- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
151198
- [Tobias Lins](https://tobi.sh) – react-notion Idea, Code
152199
- [Timo Lins](https://timo.sh) – react-notion Code, Documentation
153200
- [samwightt](https://github.com/samwightt) – react-notion Inspiration & API Typings
154-
- [vue-notion Contributors 💕](https://github.com/janniks/vue-notion/graphs/contributors)
155201
- [react-notion Contributors 💕](https://github.com/splitbee/react-notion/graphs/contributors)
156202

203+
- Big thanks to [NuxtJS](https://nuxtjs.org) for being awesome!
204+
157205
## License ⚖️
158206

159207
MIT © [Jannik Siebert](https://twitter.com/jnnksbrt)

‎docs/README.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ mapPageUrl(pageId = "") {
5757
– are used to override links to other Notion pages with custom Vue components.
5858
`pageLinkOptions` is an `Object` that requires a `component` and a `href` parameter.
5959

60-
e.g. to use `NuxtLink` components instead of HTML `a` elements
60+
e.g., to use `NuxtLink` components instead of HTML `a` elements
6161

6262
```js
6363
pageLinkOptions: {
@@ -114,7 +114,7 @@ const pageTable = await getPageTable("PAGE_ID", "ENDPOINT_URL");
114114

115115
> Feel free to open an issue if something is unclear or additional documentation is needed...
116116
117-
## Nuxt – Server-Side Rendering & Static Site Generation
117+
## NuxtJS – Server-Side Rendering & Static Site Generation
118118

119119
> For a running project check out the extensive example at [example/](/example).
120120
@@ -123,16 +123,17 @@ const pageTable = await getPageTable("PAGE_ID", "ENDPOINT_URL");
123123
There are a few required steps to allow Nuxt to work with vue-notion
124124

125125
- Install vue-notion as a dependency to your Nuxt project – `npm install vue-notion`
126-
- Add `"vue-notion"` to the `build.transpile` array in `nuxt.config.js`.
126+
- Add `"vue-notion/nuxt"` to the `buildModules` array in `nuxt.config.js`.
127127

128128
```js
129-
build: {
130-
transpile: ["vue-notion"];
131-
}
129+
// nuxt.config.js
130+
export default {
131+
// ...
132+
buildModules: ["vue-notion/nuxt"],
133+
};
132134
```
133135

134-
- Import the `NotionRenderer` in any component you want to use vue-notion in – `import { NotionRenderer } from "vue-notion"`
135-
- Voila, you can now use vue-notion as shown in the examples.
136+
- Voila, you can now use vue-notion (i.e., the `NotionRenderer` component and the Notion API methods via NuxtJS `$notion`) as shown in the examples.
136137

137138
### Static Pages
138139

‎example/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
package-lock.json
2+
yarn.lock
23

34
# Created by .ignore support plugin (hsz.mobi)
45
### Node template

‎example/nuxt.config.js‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default {
2+
// Telemetry (https://github.com/nuxt/telemetry)
23
telemetry: false,
34

45
// Target (https://go.nuxtjs.dev/config-target)
@@ -15,23 +16,9 @@ export default {
1516
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
1617
},
1718

18-
// Global CSS (https://go.nuxtjs.dev/config-css)
19-
css: [],
20-
21-
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
22-
plugins: [],
23-
2419
// Auto import components (https://go.nuxtjs.dev/config-components)
2520
components: true,
2621

2722
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
28-
buildModules: [],
29-
30-
// Modules (https://go.nuxtjs.dev/config-modules)
31-
modules: [],
32-
33-
// Build Configuration (https://go.nuxtjs.dev/config-build)
34-
build: {
35-
transpile: ["vue-notion"],
36-
},
23+
buildModules: ["vue-notion/nuxt"],
3724
};

‎example/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@
1111
"dependencies": {
1212
"core-js": "^3.6.5",
1313
"nuxt": "^2.14.12",
14-
"prismjs": "^1.22.0",
15-
"vue-notion": "^0.2.15"
14+
"prismjs": "^1.22.0"
1615
},
17-
"devDependencies": {}
16+
"devDependencies": {
17+
"vue-notion": "^0.2.15"
18+
}
1819
}

‎example/pages/_slug.vue‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,21 @@
88
</template>
99

1010
<script>
11-
import { NotionRenderer, getPageBlocks, getPageTable } from "vue-notion";
12-
1311
import "prismjs";
1412
import "prismjs/themes/prism.css";
1513
1614
export default {
17-
components: { NotionRenderer },
1815
data() {
1916
return {
2017
pageLinkOptions: { component: "NuxtLink", href: "to" },
2118
};
2219
},
23-
async asyncData({ params, error }) {
24-
const pageTable = await getPageTable("10327f9074b7433aad577ccd0020e971");
20+
async asyncData({ $notion, params, error }) {
21+
const pageTable = await $notion.getPageTable("10327f9074b7433aad577ccd0020e971");
2522
const page = pageTable.find(
2623
(item) => item.published && item.slug === params.slug
2724
);
28-
const blockMap = await getPageBlocks(page ? page.id : params.slug);
25+
const blockMap = await $notion.getPageBlocks(page ? page.id : params.slug);
2926
if (!blockMap || blockMap.error) {
3027
return error({ statusCode: 404, message: "Post not found" });
3128
}

‎example/pages/nuxt.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<NotionRenderer :blockMap="blockMap" fullPage />
3+
</template>
4+
5+
<script>
6+
export default {
7+
data: () => ({ blockMap: null }),
8+
async asyncData({ $notion }) {
9+
// use Notion module to get Notion blocks from the API via a Notion pageId
10+
const blockMap = await $notion.getPageBlocks(
11+
"8c1ab01960b049f6a282dda64a94afc7"
12+
);
13+
return { blockMap };
14+
},
15+
};
16+
</script>
17+
18+
<style>
19+
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
20+
</style>

‎example/pages/posts.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,9 @@
3535
</template>
3636

3737
<script>
38-
import { getPageTable } from "vue-notion";
39-
4038
export default {
41-
async asyncData({ params, error }) {
42-
const pageTable = await getPageTable("10327f9074b7433aad577ccd0020e971");
39+
async asyncData({ $notion, params, error }) {
40+
const pageTable = await $notion.getPageTable("10327f9074b7433aad577ccd0020e971");
4341
4442
// sort published pages
4543
const posts = pageTable

‎example/pages/basic-example.vue‎ renamed to ‎example/pages/vue.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,13 @@
33
</template>
44

55
<script>
6-
import { NotionRenderer, getPageBlocks } from "vue-notion";
7-
86
export default {
9-
components: { NotionRenderer },
107
data: () => ({ blockMap: null }),
11-
async created() {
8+
async asyncData({ $notion }) {
129
// get Notion blocks from the API via a Notion pageId
13-
this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
10+
const blockMap = await $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
11+
12+
return { blockMap }
1413
},
1514
};
1615
</script>

0 commit comments

Comments
 (0)