Uibuilder with vue doesn't show my component

Dashboard
1

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

index.html

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

// @ts-nocheck
'use strict'

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

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

    .....

})

DataCascade.vue

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

2

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

Also, have you installed Vue v2 or v3?

3

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

<script src="../uibuilder/vendor/http-vue-loader/src/httpVueLoader.js"></script>
2 Likes
4

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