Skip to content

Commit 6285b19

Browse files
authored
Add nuxt docs
1 parent 616583c commit 6285b19

File tree

1 file changed

+30
-3
lines changed

1 file changed

+30
-3
lines changed

docs/README.md

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,35 @@ const pageTable = await getPageTable("PAGE_ID", "ENDPOINT_URL");
2222

2323
> Feel free to open an issue if something is unclear or additional documentation is needed...
2424
25-
## Server-Side Rendering & Static Generation (with Nuxt)
25+
## Nuxt – Server-Side Rendering & Static Site Generation
2626

27-
_coming soon..._
27+
> For a running project check out the extensive example at [example/](/example).
28+
29+
### Usage
30+
31+
There are a few required steps to allow Nuxt to work with vue-notion
32+
33+
- Install vue-notion as a dependency to your Nuxt project – `npm install vue-notion`
34+
- Add `"vue-notion"` to the `build.transpile` array in `nuxt.config.js`.
35+
```js
36+
build: {
37+
transpile: ["vue-notion"]
38+
}
39+
```
40+
- Import the `NotionRenderer` in any component you want to use vue-notion in – `import { NotionRenderer } from "vue-notion"`
41+
- Voila, you can now use vue-notion as shown in the examples.
42+
43+
### Static Pages
44+
45+
> Using the `nuxt.config.js` [`target`](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-target/) `"static"`
46+
47+
Per default Nuxt [crawls](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate/#crawler) your pages.
48+
That means any link in any page in `pages/*.vue` is crawled and statically generated (if available).
49+
You can also configure [specific routes](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate/#routes) to be crawled (and generated) via the `generate.routes` array in `nuxt.config.js`.
50+
51+
### Blogs
52+
53+
It is possible to use the `getPageTable` method to acces Notion Databases.
54+
These can be used to maintain a list of pages with attributes.
2855

29-
For the mean time check out the extensive example at [example/](/example).
56+
The [example/](/example) shows a few ways you can access/filter/link these pages for a blog-style webpage.

0 commit comments

Comments
 (0)