Getting started with Nuxt 3

[alfonsozunigaj]

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]

Have you seen the vue3 example? https://github.com/jerosoler/drawflow-vue3-example

Why does it say Drawflow here?

const editor = ref<Drawflow | Object>({});
/* and */
(editor.value as Drawflow).start();

Try normal ref and editor.value.start();

[alfonsozunigaj]

Thank you for replying so fast! Yes, I have seen the Vue 3 example and even cloned the repository to my local computer to test it and it worked perfectly! I even used it as a guide to replicate it in Nuxt.

The reason it says Drawflow there is because I'm using typescript, so I have to type my variables and constants so that the linter won't start alerting.

[jerosoler]

How is it now in the image, does it work for you? Disabling the linter?

I think you might be getting confused with the Drawflow import and the variable. Since they were using the same name.

[alfonsozunigaj]

The code in the image throws the same error, and disabling the linter didn't help. I changed the name of the component to MyDrawflow (very original, right?) but nothing changed, so I would rule out that as source of the problem. Do you have any other theories in mind, or maybe its a compatibility issue with the latest Nuxt 3 version?

[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

[alfonsozunigaj]

Ok! The problem seemed to be when modifying the nuxt.config.ts file and placing the transpile: ['drawflow'] property! Removing it got it to work, thank you!!!

Just one more thing regarding the styling. Just importing it in the component does not work for me, but when including it in the nuxt configuration file it does.

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['drawflow/dist/drawflow.min.css'],
});

Did you have to do the same?

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