# ReferenceError: nx is not defined in Vue.js Component Rendering Topology

**URL:** <https://discourse.nodered.org/t/referenceerror-nx-is-not-defined-in-vue-js-component-rendering-topology/93476>\
**Category:** General\
**Tags:** node-red-dashboard, dashboard-2\
**Created:** [26 November 2024 11:36 UTC](https://discourse.nodered.org/t/referenceerror-nx-is-not-defined-in-vue-js-component-rendering-topology/93476 "2024-11-26T11:36:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)\
**Post date:** [26 November 2024 11:36 UTC](https://discourse.nodered.org/t/referenceerror-nx-is-not-defined-in-vue-js-component-rendering-topology/93476/1 "2024-11-26T11:36:30Z")

</div>

I have included the next.js and next.css files as follows:

I verified that the assets/nextjs/next.js file is available in the correct location.  
The topology rendering function (initializeTopology) is called in the mounted() lifecycle hook of my Vue.js component.

```auto
[
    {
        "id": "727eb203886b4836",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "30a0758880701ddd",
        "type": "ui-template",
        "z": "727eb203886b4836",
        "group": "3c3c128a73088cb0",
        "page": "",
        "ui": "",
        "name": "topo_trial",
        "order": 1,
        "width": "11",
        "height": "6",
        "head": "",
        "format": "<template>\n <div>\n <!-- <p>hello</p> -->\n <div class=\"msg\">\n <!-- {{ msg.payload }} -->\n <div id=\"topology-container\"></div>\n </div>\n <link rel=\"alternate icon\" href=\"./favicon.ico\" type=\"image/png\" sizes=\"16x16\">\n <link rel=\"stylesheet\" href=\"assets/nextjs/next.css\">\n </div>\n\n</template>\n<script src=\"https://cdn.jsdelivr.net/npm/nextlibs/nx.min.js\"></script>\n<script src=\"assets/nextjs/next.js\"></script>\n<script>\n export default {\n data() {\n return {\n topologyData: {\n nodes: [\n { id: 0, x: 400, y: -100, name: \"ISP1\", device_type: \"cloud\", color: \"grey\" },\n { id: 1, x: 600, y: -100, name: \"ISP2\", device_type: \"cloud\", color: \"grey\" },\n { id: 2, x: 400, y: 0, name: \"Edge1\", device_type: \"router\", color: \"red\" },\n { id: 3, x: 600, y: 0, name: \"Edge2\", device_type: \"router\", color: \"red\" },\n { id: 4, x: 400, y: 100, name: \"Switch1\", device_type: \"switch\" },\n { id: 5, x: 600, y: 100, name: \"Switch2\", device_type: \"switch\" },\n { id: 6, x: 200, y: 200, name: \"ESX1\", device_type: \"server\" },\n { id: 7, x: 400, y: 200, name: \"ESX2\", device_type: \"server\" },\n { id: 8, x: 600, y: 200, name: \"ESX3\", device_type: \"server\" },\n { id: 9, x: 800, y: 200, name: \"ESX4\", device_type: \"server\" },\n { id: 10, x: 500, y: 300, name: \"SAN\", device_type: \"server\" }\n],\n links: [\n { source: 0, target: 2, color: \"green\" },\n { source: 1, target: 3 },\n { source: 2, target: 4, color: \"green\" },\n { source: 2, target: 5 },\n { source: 3, target: 4 },\n { source: 3, target: 5 },\n { source: 4, target: 5 },\n { source: 6, target: 4, color: \"green\" },\n { source: 6, target: 5, color: \"red\" },\n { source: 7, target: 4, color: \"green\" },\n { source: 7, target: 5, color: \"red\" },\n { source: 8, target: 4, color: \"green\" },\n { source: 8, target: 5, color: \"red\" },\n { source: 9, target: 4, color: \"green\" },\n { source: 9, target: 5, color: \"red\" },\n { source: 10, target: 4, color: \"red\" },\n { source: 10, target: 5, color: \"red\" }\n]\n },\n topologyApp: null\n };\n },\n mounted() {\n \n \n\n \n this.initializeTopology();\n \n },\n methods: {\n initializeTopology() {\n const { topologyData } = this;\n\n // Instantiate nx Application\n const app = new nx.ui.Application();\n\n // Configuration for topology\n const topologyConfig = {\n width: window.innerWidth,\n height: window.innerHeight,\n nodeConfig: {\n label: \"model.name\",\n iconType: \"model.device_type\",\n color: \"model.color\"\n },\n linkConfig: {\n linkType: \"straight\",\n color: \"model.color\"\n },\n showIcon: true\n };\n\n // Instantiate Topology\n const topology = new nx.graphic.Topology(topologyConfig);\n topology.data(topologyData);\n topology.attach(app);\n\n // Attach the app to the container\n app.container(document.getElementById(\"topology-container\"));\n\n // Save the app reference\n this.topologyApp = app;\n }\n },\n unmounted() {\n // Clean up when the component is destroyed\n if (this.topologyApp) {\n this.topologyApp.destroy();\n }\n }\n };\n</script>\n\n<style>\n #topology-container {\n width: 100%;\n height: 100%;\n background-color: #f0f0f0;\n }\n</style>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 280,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "3c3c128a73088cb0",
        "type": "ui-group",
        "name": "topology",
        "page": "7c0feb07efa735af",
        "width": "11",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "7c0feb07efa735af",
        "type": "ui-page",
        "name": "topo",
        "ui": "64fc71361e24a0d0",
        "path": "/page4",
        "icon": "home",
        "layout": "grid",
        "theme": "",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "64fc71361e24a0d0",
        "type": "ui-base",
        "name": "",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-iframe",
            "ui-control",
            "ui-template",
            "ui-gauge",
            "ui-chart",
            "ui-slider",
            "ui-form",
            "ui-text-input",
            "ui-number-input",
            "ui-file-input",
            "ui-button",
            "ui-button-group",
            "ui-dropdown",
            "ui-radio-group",
            "ui-switch",
            "ui-text",
            "ui-chart",
            "ui-form",
            "ui-number-input",
            "ui-switch",
            "ui-table",
            "ui-gauge",
            "ui-markdown",
            "ui-iframe",
            "ui-tabulator",
            "ui-radio-group",
            "ui-dropdown",
            "ui-button-group",
            "ui-file-input"
        ],
        "showPathInSidebar": false,
        "showPageTitle": false,
        "navigationStyle": "icon",
        "titleBarStyle": "fixed"
    }
]

```

this is my error  
ReferenceError: nx is not defined  
at Proxy.initializeTopology (eval at (index-TznpjNEy.js:241:3017), :3:17)  
at Proxy.mounted (eval at (index-TznpjNEy.js:241:3500), :2:10)  
at Proxy.mounted (index-TznpjNEy.js:241:6528)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 November 2024 12:54 UTC](https://discourse.nodered.org/t/referenceerror-nx-is-not-defined-in-vue-js-component-rendering-topology/93476/2 "2024-11-26T12:54:57Z")

</div>

I cannot see the next.js/css files in the flow you shared.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 February 2025 12:54 UTC](https://discourse.nodered.org/t/referenceerror-nx-is-not-defined-in-vue-js-component-rendering-topology/93476/3 "2025-02-24T12:54:58Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.