# Uibuilder with vue doesn't show my component

**URL:** https://discourse.nodered.org/t/uibuilder-with-vue-doesnt-show-my-component/88327
**Category:** Dashboard
**Tags:** uibuilder
**Created:** [28 May 2024 19:02 UTC](https://discourse.nodered.org/t/uibuilder-with-vue-doesnt-show-my-component/88327 "2024-05-28T19:02:51Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![David83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/david83/32/89387_2.png) [@David83](https://discourse.nodered.org/u/David83)
#### Post date: [28 May 2024 19:02 UTC](https://discourse.nodered.org/t/uibuilder-with-vue-doesnt-show-my-component/88327/1 "2024-05-28T19:02:51Z")

</div>

My Component is't displayed ... but i don't understand why:

index.html

```auto
<!doctype html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">

    <!-- #region Supporting CSS. -->
    <!-- <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" /> -->
    <!-- <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" /> -->
    <!-- <link type="text/css" rel="stylesheet" href="./index.css" media="all"> < !-- Your own CSS -->
    <link rel="stylesheet" type="text/css" href="css/lcars-ultra-classic.css">
    <link rel="stylesheet" type="text/css" href="css/lcars-colors.css">
    <!-- #endregion -->

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed -->
    <script defer src="../uibuilder/vendor/vue/dist/vue.min.js">/* prod version with component compiler */</script>
    <script defer src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js">/* remove 'min.' to use dev version */</script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head>

<body>

    <div id="app" class="uib" v-cloak><!-- All UI code needs to be within here for Vue -->
        <b-container id="app_container"><!-- Wraps the bootstrap-vue formatting -->
            <section class="wrap-standard" id="column-3">
                <div class="wrap">

                      ......

                        <div class="data-cascade-button-group">
                            <div class="head-center-wrapper">
                                <datacascade></datacascade>
                            </div>
                            <nav id="nav-standard">
                                <a href="" id="b-one" v-html="test">01</a>
                            </nav>
                        </div>

                        ......

                    </div>
                </div>
            </section>
        </b-container>
    </div>
    

</body>

</html>

```

index.js

```auto
// @ts-nocheck
'use strict'

const app = new Vue({ // eslint-disable-line no-unused-vars
    el: '#app',

    components: {
        'datacascade': httpVueLoader('./components/DataCascade.vue'),
    },

    .....

}) 

```

DataCascade.vue

```auto
<template>
    <div class="data-cascade" id="default">
        <div class="row-1">
            <div class="dc1">101</div>
            <div class="dc2">7109</div>
        </div>
    </div>
</template>

<style scoped></style>

<script>
    module.exports = {
        data() {
            return {};
        },
        mounted() {
        },
        methods: {
        },
    }
</script>

```

Can one of you tell me why this dosn't work?

---

<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: [28 May 2024 20:04 UTC](https://discourse.nodered.org/t/uibuilder-with-vue-doesnt-show-my-component/88327/2 "2024-05-28T20:04:15Z")

</div>

Can you check out your browser dev tools console for errors?

Also, have you installed Vue v2 or v3?

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [28 May 2024 20:37 UTC](https://discourse.nodered.org/t/uibuilder-with-vue-doesnt-show-my-component/88327/3 "2024-05-28T20:37:52Z")

</div>

.. and **httpVueLoader** is used but no script tag for it in index.html

```auto
<script src="../uibuilder/vendor/http-vue-loader/src/httpVueLoader.js"></script>

```

---

<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: [27 June 2024 20:38 UTC](https://discourse.nodered.org/t/uibuilder-with-vue-doesnt-show-my-component/88327/4 "2024-06-27T20:38:42Z")

</div>

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