Add example of non composition API for Vue3 + Nuxt

[spyderdsn]

Currently this is my plugin file:

import VueNotion, { getPageBlocks, getPageTable } from "vue-notion";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueNotion);

  return {
    provide: {
      notion: { getPageBlocks, getPageTable },
    },
  }
})

and component file:

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

<script setup>
const { $notion } = useNuxtApp()
const props = defineProps({
  projectUrl: {
    type: String,
    required: true
  }
})

const { data: blockMap } = useAsyncData('page_nuxt', () => $notion.getPageBlocks(props.projectUrl))

watch(
  () => props.projectUrl,
  async (projectUrl) => {
    const { data: blockMap } = useAsyncData('page_nuxt', () => $notion.getPageBlocks(projectUrl))
  }
)
</script>

<style>
@import 'vue-notion/src/styles.css';
</style>

This works however I'm struggling to make the renderer work without using composition API? Can someone hint me please?

I tried to do something like this, based on the example but get no output:

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

<script>
import { useNuxtApp } from '@nuxt/app';

export default {
  data() {
    return {
      blockMap: null,
    };
  },
  async created() {
    const { $notion } = useNuxtApp();
    const { data } = await this.$notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
    this.blockMap = data;
  },
};
</script>

<style>
@import "vue-notion/src/styles.css";
</style>

Thanks

[janniks]

Hi 👋🏻
Can you try this file (and example folder) from the vue2 branch. https://github.com/janniks/vue-notion/blob/vue2/example/pages/nuxt.vue

Might be what you’re looking for ☺️

[spyderdsn]

@janniks thanks but this does not render the page and there is no error given either.

[janniks]

Are you using a fresh Nuxt project? I’ll try to reproduce

[spyderdsn]

No, it is not fresh but the SETUP method works no problem just I have the rest of the project in non composition format.

I'm using: Nuxt 3.8.2 with Nitro 2.8.1

This plugin format:

import VueNotion, { getPageBlocks, getPageTable } from "vue-notion";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueNotion);

  return {
    provide: {
      notion: { getPageBlocks, getPageTable },
    },
  }
})

and this component will work:

<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>

but everything else I have more like:

<script>
export default {
  data() {
    return {
      mainHeading: null,
    }
  },
  methods: {
    renderData(store) {}
  },
  created() {
    const store = webStore()

    watch(
      () =>  this.renderData(store)
    )
  }
}
</script>

Thanks