0

I'm new in here and also Vue.js.

I want to try 'vue-table-2' like here; (https://jsfiddle.net/matfish2/jfa5t4sm/) but I couldn't run it correctly.

"dependencies": {
"bootstrap3": "^3.3.5",
"moment": "^2.23.0",
"vue": "^2.5.21",
"vue-tables-2": "^1.4.70"
},

console error message;

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VueClientServer>
       <HelloWorld> at src/components/HelloWorld.vue
         <App> at src/App.vue
           <Root>

my code;

<template>    
  <div>    
    <h3 class="vue-title">Vue Tables 2 Demo - Client Component</h3>    
    <div id="users">    
<vue-client-server :columns="columns" :data="data" :options="options">
        <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
        <div slot="child_row" slot-scope="props">
          The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a>
        </div>
      </vue-client-server>
    </div>
    <p class="vue-pagination-ad">
      Like the pagination component and want to use it independently? Try <a target="_blank" href="https://www.npmjs.com/package/vue-pagination-2">vue-pagination-2</a>
    </p>
  </div>
</template>
<script>
   import VueClientServer from "vue-tables-2";
  // import {ServerTable, ClientTable, Event} from 'vue-tables-2';
  export default {
    name: "HelloWorld",
    props: {
    },
    components: {
      VueClientServer
   },
    data() {
      return {
        columns: ['name', 'code', 'uri'],
        options: {
          headings: {
            name: 'Country Name',
            code: 'Country Code',
            uri: 'View Record'
          },
          sortable: ['name', 'code'],
          filterable: ['name', 'code']
        },
        data:[{
              code: "ZW",
              name: "Zimbabwe",
              created_at: "2015-04-24T01:46:50.459583",
              updated_at: "2015-04-24T01:46:50.459593",
              uri: "http://api.lobbyfacts.eu/api/1/country/245",
              id: 245
          }],
        }
      },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
yeter yavan
  • 1
  • Have you tried searching "template or render function not defined" on the web? What did that show you? If you are still stuck, how do these other references not apply? –  Jan 21 '19 at 19:32
  • Hi,Thanks for answer. Of course I search it, but I couldn't do integrated the 'Rollup' and 'webpack' sides from here; https://vues.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only This is my first Vue.js project: – yeter yavan Jan 22 '19 at 22:10
  • Make sure you [edit] the question with the steps you have taken to research and solve this. –  Jan 23 '19 at 17:00

1 Answers1

0

Have you tried exposing jquery, axios, moment, bootstrap & daterangepicker globally?

https://www.npmjs.com/package/vue-tables-2#date-columns

You can do this in main.js:

import axios from 'axios'
window.axios = axios
user10543119
  • 161
  • 5