Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/janniks/vue-notion below:

janniks/vue-notion: A fast Vue renderer for Notion pages

An unofficial Notion renderer

🎯 Accurate – Results are almost identical

🎨 Custom Styles – Styles are easily adaptable. Optional styles included

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

🌎 SSR / Static Generation Support – Functions to work with NuxtJS and other frameworks

Warning This is the documentation for the upcoming Vue 3 compatible release of vue-notion. For the Vue 2 version, check out the vue2 branch.

Check out the /example folder for a full working example using Nuxt 3.

Note Potentially outdated -- 3.0.0 docs are a work-in-progress

• NotionRenderer: docs/
• Syntax-Highlighting in Code Blocks (with Prism.js): docs/
• Notion API: docs/
• Nuxt: docs/

Check out a full working demo at vue-notion.now.sh ✨ The code for the demo is in example/.

These examples use a simple wrapper around the notion-api-worker to access the Notion page data. It is also possible to store a page received from the Notion API in .json and use it without the async/await part.

Use the getPageBlocks and getPageTable methods with caution! They are based on the private Notion API. We can NOT guarantee that it will stay stable. The private API is warpped by notion-api-worker. If you use these methods a lot, please consider hosting you own instance, as described in docs#notion-api.

This example is a part of example/ and is hosted at vue-notion.now.sh/vue.

<template>
  <NotionRenderer :blockMap="blockMap" fullPage />
</template>

<script lang="ts">
import { NotionRenderer, getPageBlocks } from "vue-notion";

export default {
  components: { NotionRenderer },
  data: () => ({ blockMap: null }),
  async created() {
    // get Notion blocks from the API via a Notion pageId
    this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
  },
};
</script>

<style>
/* optional Notion-like styles */
@import "vue-notion/src/styles.css";
</style>

This example is a part of example/ and is hosted at vue-notion.now.sh/nuxt. The page assumes a Nuxt plugin in ~/plugins/vue-notion.js that registers via the useNuxtApp hook.

<template>
  <NotionRenderer :blockMap="blockMap" fullPage />
</template>

<script lang="ts" setup>
const { $notion } = useNuxtApp();

// use Notion module to get Notion blocks from the API via a Notion pageId
const { data: blockMap } = useAsyncData("page_nuxt", () =>
  $notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7")
);
</script>

<style>
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
</style>

List of pages that are using this library.

• HelpKit — Build Knowledge Bases in Notion
• StorePreviewer — Preview and optimize your app store presence
• Dominik Sobe's Personal Site
• Bersihin Tech
• Wisata Diary
• AymaneMx's Blog
• Notaku — Build docs and blog websites from Notion pages
• ...if you're using vue-notion, we'd be happy to feature you here

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

Please, feel free to open an issue if you notice any important blocks missing or anything wrong with existing blocks.

• janniksco – vue-notion Code
• Dominik Sobe – vue-notion Inspiration, Debugging
• vue-notion Contributors 💕
• Tobias Lins – react-notion Idea, Code
• Timo Lins – react-notion Code, Documentation
• samwightt – react-notion Inspiration & API Typings
• react-notion Contributors 💕

• Big thanks to NuxtJS for being awesome!

MIT © janniksco

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4