A RetroSearch Logo

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

Search Query:

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

GitHub - janniks/vue-notion at vue2

An unofficial Notion renderer

A Vue renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site.

Also check out react-notion (developed by Splitbee 🐝 – a fast, reliable, free, and modern analytics for any team)

This package doesn't handle the communication with the API. Check out notion-api-worker from Splitbee for an easy solution.

Created by Jannik Siebert

🎯 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

Install as a dev-dependency and add "vue-notion/nuxt" to the buildModules array in nuxt.config.js.

npm install vue-notion --save-dev
// nuxt.config.js
export default {
  // ...
  buildModules: ["vue-notion/nuxt"],
};

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>
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>
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
</style>

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

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

<script>
export default {
  data: () => ({ blockMap: null }),
  async asyncData({ $notion }) {
    // use Notion module to get Notion blocks from the API via a Notion pageId
    const blockMap = await $notion.getPageBlocks(
      "8c1ab01960b049f6a282dda64a94afc7"
    );
    return { blockMap };
  },
};
</script>

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

List of pages that are using this library.

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

Block Type Supported Notes Text ✅ Yes Heading ✅ Yes Image ✅ Yes Image Caption ✅ Yes Bulleted List ✅ Yes Numbered List ✅ Yes Quote ✅ Yes Callout ✅ Yes Column ✅ Yes iframe ✅ Yes Video ✅ Yes Only embedded videos Divider ✅ Yes Link ✅ Yes Code ✅ Yes Web Bookmark ✅ Yes Toggle List ✅ Yes Page Links ✅ Yes Cover ✅ Yes Enable with fullPage Equations ✅ Yes Checkbox ✅ Yes Simple Tables ✅ Yes Databases ❌ Not planned Table Of Contents ❌ Not planned

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

MIT © Jannik Siebert

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