1

I just want to try using vue.js but got into trouble when I try to use a template that I bought. I've put all the .css and .js files into index.html and then call the components inside vue.js itself.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports"
          name="description"/>
    <meta content="" name="author"/>

    <title>My Application</title>

    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
          type="text/css"/>
    <link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css"/>
    <link href="assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN THEME GLOBAL STYLES -->
    <link href="assets/global/css/components-md.min.css" rel="stylesheet" id="style_components" type="text/css"/>
    <link href="assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME GLOBAL STYLES -->
    <!-- BEGIN THEME LAYOUT STYLES -->
    <link href="assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME LAYOUT STYLES -->
    <link rel="shortcut icon" href="src/assets/logo.png"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">

    <!-- BEGIN CORE PLUGINS -->
    <script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="assets/global/plugins/moment.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
    <script src="assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
    <script src="assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
    <script src="assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN THEME GLOBAL SCRIPTS -->
    <script src="assets/global/scripts/app.min.js" type="text/javascript"></script>
    <!-- END THEME GLOBAL SCRIPTS -->
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="assets/pages/scripts/dashboard.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL SCRIPTS -->
    <!-- BEGIN THEME LAYOUT SCRIPTS -->
    <script src="assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
    <script src="assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
    <script src="assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
    <script src="assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
    <!-- END THEME LAYOUT SCRIPTS -->
</head>


</head>
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-md">

    <div class="page-wrapper">
        <div id="app"></div>
        <script src="/dist/build.js"></script>
    </div>
</body>
</html>

All pages are running perfectly and successfully called by belongs vue.js but does not appear if I use the calling page with <router-link>

Graph.vue

<template>
    <div>
        <h1 class="page-title"> Grafik Pages
            <small>statistics, charts, recent events and reports</small>
        </h1>

        <div class="row">
            <div class="col-lg-6 col-xs-12 col-sm-12">
                <!-- BEGIN PORTLET-->
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-bar-chart font-dark hide"></i>
                            <span class="caption-subject font-dark bold uppercase">Site Visits</span>
                            <span class="caption-helper">weekly stats...</span>
                        </div>
                        <div class="actions">
                            <div class="btn-group btn-group-devided" data-toggle="buttons">
                                <label class="btn red btn-outline btn-circle btn-sm active">
                                    <input name="options" class="toggle" id="option1" type="radio">New</label>
                                <label class="btn red btn-outline btn-circle btn-sm">
                                    <input name="options" class="toggle" id="option2" type="radio">Returning</label>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body">

                        <div id="site_statistics_loading" style="display: none;">
                            <img src="../../../assets/global/img/loading.gif" alt="loading"> </div>
                        <div id="site_statistics_content" class="display-none" style="display: block;">
                            <div id="site_statistics" class="chart" style="padding: 0px; position: relative;"> <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 10px; text-align: center;">02/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 58px; text-align: center;">03/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 107px; text-align: center;">04/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 155px; text-align: center;">05/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 203px; text-align: center;">06/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 251px; text-align: center;">07/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 300px; text-align: center;">08/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 348px; text-align: center;">09/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 396px; text-align: center;">10/2013</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; top: 273px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;">0</div><div style="position: absolute; top: 220px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1000</div><div style="position: absolute; top: 166px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">2000</div><div style="position: absolute; top: 113px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">3000</div><div style="position: absolute; top: 59px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">4000</div><div style="position: absolute; top: 6px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">5000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"></canvas></div>
                        </div>
                    </div>
                </div>
                <!-- END PORTLET-->
            </div>
            <div class="col-lg-6 col-xs-12 col-sm-12">
                <!-- BEGIN PORTLET-->
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-share font-red-sunglo hide"></i>
                            <span class="caption-subject font-dark bold uppercase">Revenue</span>
                            <span class="caption-helper">monthly stats...</span>
                        </div>
                        <div class="actions">
                            <div class="btn-group">
                                <a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> Filter Range
                                    <span class="fa fa-angle-down"> </span>
                                </a>
                                <ul class="dropdown-menu pull-right">
                                    <li>
                                        <a href="javascript:;"> Q1 2014
                                            <span class="label label-sm label-default"> past </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;"> Q2 2014
                                            <span class="label label-sm label-default"> past </span>
                                        </a>
                                    </li>
                                    <li class="active">
                                        <a href="javascript:;"> Q3 2014
                                            <span class="label label-sm label-success"> current </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;"> Q4 2014
                                            <span class="label label-sm label-warning"> upcoming </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="site_activities_loading" style="display: none;">
                            <img src="../../../assets/global/img/loading.gif" alt="loading"> </div>
                        <div id="site_activities_content" class="display-none" style="display: block;">
                            <div id="site_activities" style="height: 228px; padding: 0px; position: relative;"> <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 21px; text-align: center;">DEC</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 66px; text-align: center;">JAN</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 109px; text-align: center;">FEB</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 151px; text-align: center;">MAR</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 197px; text-align: center;">APR</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 239px; text-align: center;">MAY</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 285px; text-align: center;">JUN</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 330px; text-align: center;">JUL</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 371px; text-align: center;">AUG</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 417px; text-align: center;">SEP</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; top: 197px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;">0</div><div style="position: absolute; top: 149px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 7px; text-align: right;">500</div><div style="position: absolute; top: 100px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1000</div><div style="position: absolute; top: 52px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1500</div><div style="position: absolute; top: 3px; font: small-caps 400 11px/14px &quot;Open Sans&quot;,sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">2000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"></canvas></div>
                        </div>
                        <div style="margin: 20px 0 10px 30px">
                            <div class="row">
                                <div class="col-md-3 col-sm-3 col-xs-6 text-stat">
                                    <span class="label label-sm label-success"> Revenue: </span>
                                    <h3>$13,234</h3>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-6 text-stat">
                                    <span class="label label-sm label-info"> Tax: </span>
                                    <h3>$134,900</h3>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-6 text-stat">
                                    <span class="label label-sm label-danger"> Shipment: </span>
                                    <h3>$1,134</h3>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-6 text-stat">
                                    <span class="label label-sm label-warning"> Orders: </span>
                                    <h3>235090</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END PORTLET-->
            </div>
        </div>
    </div>


</template>

<script>
    export default {
        created () {

        },
        methods: {

        }
    }
</script>

But when I refresh the page (manual), the chart data to come up with the perfect.

App.vue

<template>
    <div id="app">
        <navbar></navbar>
        <div class="page-container">
            <leftmenu></leftmenu>
            <container></container>
        </div>
    </div>
</template>

<script>

import Menu from './components/Menu.vue'
import LeftMenu from './components/Leftmenu.vue'
import Container from './components/Container.vue'

export default {
    components: {
        'navbar': Menu,
        'leftmenu': LeftMenu,
        'container': Container,
    }
}

</script>

routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: "/",
            component: require('./components/pages/Home.vue'),
            meta: {
                forVisitors: true
            }
        },
        {
            path: "/home",
            component: require('./components/pages/Home.vue'),
            meta: {
                forVisitors: true
            }
        },
        {
            path: "/graph",
            component: require('./components/pages/Graph.vue'),
            meta: {
                forVisitors: true
            }
        },
        {
            path: "/form",
            component: require('./components/pages/Form.vue'),
            meta: {
                forVisitors: true
            }
        }
    ],
    linkActiveClass: 'nav-item start active open',
    mode: 'history'
})

export default router

1

What I miss??

Thanks

Improve this question
11
  • All bunch of code you posted is mostly useless for us.We need more VueJS related code - current one doesn't tell us anything special. Commented Mar 8, 2017 at 9:48
  • Hi @BelminBedak please check my code update Commented Mar 8, 2017 at 9:52
  • Thanks this is better.Have you configured your server for history mode usage ? router.vuejs.org/en/essentials/history-mode.html Commented Mar 8, 2017 at 9:59
  • Yes...My config is mode: 'history' Commented Mar 8, 2017 at 9:59
  • I see that, my question was related to server configuration - because when you are using the HTML5 History mode your server (Apache, nginx, Node or something else) need special configuration that is pretty well described on link I posted. Also could you show us how you deal with <router-link> Btw any console error ? Commented Mar 8, 2017 at 10:02

1 Answer 1

Reset to default
3

After looking at the repo, I noticed bunch of jQuery data that sometimes could mess with VueJS.

The initialization of the jQuery graph into Graph.vue component, should be done in some of lifecylce methods when document is ready

mounted() {
  jQuery(document).ready(function() {
    // chart init method
  })
}

I still suggest to not mix up jQuery and Vue a lot - they are conceptually different and It just make a big mess.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks @Belmin for your help

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.