vue-notion-render
📜 Vue Renderer for Notion pages.
Features
- Supports The Official Notion API
- Supports notion-api-worker to render unsupported blocks of the Official API created by @splitbee
- Fast
- Customizable
Install
npm install vue-notion-render --save
Vue.js
in src/index.js
file import the component and use Vue.component method.
import Vue from "vue"
import VueNotionRender from "vue-notion-render"
Vue.component('VueNotionRender', VueNotionRender)
Nuxt.js
in order to use it with Nuxt.js create a Nuxt plugin.
-
in
/plugins
directory create a filevue-notion-render.js
import VueNotionRender from 'vue-notion-render' import Vue from 'vue' Vue.component('VueNotionRender', VueNotionRender)
-
Register the plugin by adding the file in
nuxt.config.js
plugins arrayplugins: ['~/plugins/vue-notion-render.js']
Local Component
if you don't want to register the component globally you can use it locally in your component.
<script>
import VueNotionRender from "vue-notion-render"
...
export default {
components: {
VueNotionRender,
},
...
</script>
Usage
This package doesn't handle the communication with the API, therefore to learn more about the official API check out the official documentation.
Currently the Official API doesn't support all Notion blocks, a temporary solution is to use notion-api-worker a serverless wrapper for the private Notion API.
Using notion-api-worker
- Use the /v1/page/:id to retrieve page blocks
- Make sure to pass :unofficial="true" prop
<template>
<vue-notion-render :unofficial="true" :data="data" />
</template>
<script>
...js
export default {
...
data() {
return {
data: {}
};
},
async created() {
try {
const data = await fetch("https://beta.notiontoblog.workers.dev/v1/page/f36a63918d1246909206813dcec928ea")
this.data = await data.json()
}catch(err){
console.log(err)
}
}
};
</script>
Using The official API
https://developers.notion.com/reference/get-block-children
- Retrieve block children and pass the results array to data
- Make sure to pass :unofficial="false" prop
<template>
<vue-notion-render :unofficial="false" :data="data" />
</template>
<script>
...
export default {
...
data() {
return {
data: []
};
},
async created() {
// Retrieve block children and pass the results array to data
// https://developers.notion.com/reference/get-block-children
}
};
</script>
Supported Blocks
Block Type | Supported | Notion-API-Worker | Official API | Note |
---|---|---|---|---|
paragraph | ||||
Headings | ||||
To-do | ||||
Lists | ||||
Toggle | ||||
Quote | ||||
Colors | ||||
Highlight | ||||
Divider | ||||
Callout | ||||
Emojis | ||||
Inline Equation | ||||
Block Equation | ||||
Code | ||||
Bookmark | ||||
Embeds | Spotify, Twitter, Maps, Figma, Pdf, Codepen, TypeForm, Replit, Youtube, Whimsical, Drive | |||
Layout | ||||
Video | embed | |||
Audio | embed | |||
File | embed | |||
Table | soon | |||
Board | soon |
Custom Blocks
vue-notion-render let you use customized components to render some blocks, to do that
1. Register Components globally
Vue.js in main.js
file register the components
import Vue from "vue";
import Component1 from "../components/component1.vue";
import Component2 from "../components/component2.vue";
Vue.component("Component1", Component1);
Vue.component("Component2", Component2);
Nuxt.js
1.create a plugin in /plugins
directory and name it components.js
import Vue from "vue";
import Component1 from "../components/component1.vue";
import Component2 from "../components/component2.vue";
Vue.component("Component1", Component1);
Vue.component("Component2", Component2);
2- Register the plugin by adding the file in nuxt.config.js
plugins array
plugins: ['~/plugins/components.js']
2. Create Customized block array
You need to create an array of objects that contains blockId
and componentName
like this
data() {
return {
customBlocks: [
{
blockId: "fe30b1ce-84a7-47b3-abe1-b3448b989115",
componentName: "Component1"
},
{
blockId: "305fed49-f7e8-412f-80a1-b32e2bbd5a01",
componentName: "Component2"
}
]
};
},
custom
prop
3. Pass the array to You need to pass the customized block array to custom
prop
<VueNotionRender :unofficial="true" :data="blocks" :custom="customBlocks" />
block
prop in your component
4. Accept to have the block data you need to accept block
prop in your component
<script>
export default {
props: {
block: Object,
},
};
</script>
Credits
Created By @yudax