user3608304 user3608304 -4 years ago 87
Javascript Question

Component model from Vueify is empty

I just now started with Vue.js, and this is the first time I'm trying to use Vueify and Browserify.
I made this simple component to generate a table from a Json, however the div where my component should show up is empty, I don't get any errors and the Vue dev tools extension shows my Json with all the correct data. I'm probably doing something very dumb here, but I can't see it...

My index.html:

<div class="content">
<div id="vuePersonagens"></div>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/components/Personagens/build.js"></script>

Personagens.vue :

<table v-for="personagem in personagens" class="table table-striped table-hover">
<th>Level Efetivo</th>
<td>{{ personagem.nome }}</td>
<td>{{ personagem.raca }}</td>
<td>{{ personagem.classe }}</td>
<td>{{ personagem.level }}</td>

<script lang="ts">
import * as Vue from 'vue'
import Component from 'vue-class-component'

props: {
personagens: [{ "nome": String, "raca": String, "classe": String, level: Number}]
export default class Personagens extends Vue {
personagens: [{ "nome": String, "raca": String, "classe": String, level: Number}]


var Vue = require('vue')
var Personagens = require('./Personagens.vue')

new Vue({
el: '#vuePersonagens',
data: {
personagens: [{ "nome": "Banjo", "raca": "Lizarkin", "classe": "Bard/Cleric", level: 8}]


"name": "cleave",
"version": "1.0.0",
"description": "JSON",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"repository": {
"type": "git",
"url": "git+"
"author": "Heitor Saldanha",
"license": "ISC",
"homepage": "",
"dependencies": {
"@types/es6-promise": "0.0.32",
"vue": "^2.3.4",
"vue-class-component": "^5.0.1"
"devDependencies": {
"vueify": "^9.4.1"
"browser": {
"vue": "vue/dist/vue.common.js"

Console showing empty DIV

Vue devtools shows my Json

Answer Source

You need to register the Personagens.vue component in your start.js file.

You can either do this globally:

Vue.component('personagens', Personagens);

Or in the root component:

new Vue({
  el: '#vuePersonagens',
  components: { personagens: Personagens },
  data: {

Then, you also need to actually include the component's tag in the template:

<div id="vuePersonagens">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download