Getting started with Nuxt 3

Hi there! I’m having a bit of trouble getting this to work in a brand new Nuxt 3 (RC) application. I’ve follow the examples and read the issues but I still can’t get it to work. My project has only one component called drawflow.vue:

<script lang="ts" setup>
import { render } from "vue";
import Drawflow from "drawflow";
import styleDrawflow from "drawflow/dist/drawflow.min.css";

const editor = ref<Drawflow | Object>({});
const Vue = { version: 3, h, render };
const internalInstance = getCurrentInstance();
internalInstance.appContext.app._context.config.globalProperties.$df = editor;

onMounted(() => {
  var id = document.getElementById("drawflow");
  editor.value = new Drawflow(
    id,
    Vue,
    internalInstance.appContext.app._context
  );
  (editor.value as Drawflow).start();
});
</script>

<template>
  <div id="drawflow"></div>
</template>

that is being used in the app.vue file in the source directory of the project:

<template>
  <Drawflow />
</template>

<script setup lang="ts"></script>

Also, this is my nuxt.config.ts file:

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ["drawflow"],
  }
});

and my package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@types/drawflow": "^0.0.4",
    "nuxt": "3.0.0-rc.6"
  },
  "dependencies": {
    "drawflow": "^0.0.59"
  }
}

The thing is, when I run the local server, this error pops up:

[nuxt] [request error] Cannot set properties of undefined (setting 'Drawflow')
  at ./.nuxt/dist/server/server.mjs:3410:192
  at $id_fwiUH6v28r (./.nuxt/dist/server/server.mjs:3410:197)
  at __instantiateModule__ (./.nuxt/dist/server/server.mjs:3547:9)
  at __ssrLoadModule__ (./.nuxt/dist/server/server.mjs:3485:25)
  at ssrImport (./.nuxt/dist/server/server.mjs:3510:13)
  at $id_BMrEYGZ7G0 (./.nuxt/dist/server/server.mjs:3360:37)
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:3547:3)

I’ve been stuck on this for a while, and would REALLY appreciate any help! Thank you!

[jerosoler]

I just did a test with nuxt 3.

app.vue

<template>
  <div>
    <NuxtWelcome />
    <drawflow />
  </div>
</template>

components/drawflow.vue

<template>
    <div id="drawflow"></div>
</template>

<script setup>
import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css'
import { onMounted, shallowRef, h, getCurrentInstance, render, readonly, ref } from 'vue'
import Node1 from './node1.vue'

const editor = shallowRef({})
const internalInstance = getCurrentInstance()
const Vue = { version: 3, h, render };

internalInstance.appContext.app._context.config.globalProperties.$df = editor;

onMounted(() => {
   const id = document.getElementById("drawflow");
    editor.value = new Drawflow(id, Vue, internalInstance.appContext.app._context);
    editor.value.start();

    editor.value.registerNode('Node1', Node1, {}, {});
    
    editor.value.addNode('test', 1, 2, 100, 300, 'test', {}, '<div>Hello</div>')
    editor.value.addNode('Node1', 1, 2, 150, 320, 'test', {}, 'Node1', 'vue');
});
</script>


<style scoped>
#drawflow {
    width: 100%;
    height: 600px;
    border: 1px solid red;
}
</style>

And component node 1: components/node1.vue

<template>
    <div ref="el">
        test
    </div>
</template>

Preview:

In nuxt config I have not had to transpile. Default file.

Installed nuxt with:

npx nuxi init nuxt-drawflow
npm install
npm run dev

[jerosoler]

The transpilation is surely only for nuxt2 i believe in the first versions.

I added the stylo in the same component. I didn’t have to add it in the config. But it is equally correct.