Inserting VueJS component template in HTML page not working

add vue component to existing page
vue component template
vue single file components
vue nested components
vue standalone component
vue component style
vue component tutorial
vue reusable components

I have the following main.js:

import Test from './components/Test.vue'

Vue.component('test', Test);

var vm = new Vue({
    el: '.vue-wrap',
    components: { Test },
});
window.vm = vm;

And I have the folllowing Test.vue:

<template>
    <li>
        Hello World
    </li>
</template>

<script>
    export default {
        name: 'Test',
    }
</script>

I build the application and I copy the content of "dist" folder in my website's "vue" folder. I have the following HTML file:

<!DOCTYPE html><html><head><meta charset=utf-8><link rel=apple-touch-icon sizes=76x76 href=static/img/apple-icon.png><link rel=icon type=image/png sizes=96x96 href=static/img/favicon.png><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>My App!</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link type=text/css href="https://fonts.googleapis.com/css?family=Muli:400,300" rel=stylesheet><link type=text/css href="https://fonts.googleapis.com/css?family=Montserrat" rel=stylesheet><link type=text/css href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel=stylesheet><link type=text/css href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet><link href=static/css/themify-icons.css rel=stylesheet><link href=/vue/static/css/app.d9b210b92ea60ad0856c8dc063cccfec.css rel=stylesheet></head><body><div class=wrapper id=app></div><script type=text/javascript src=/vue/static/js/manifest.bdf9878acc459aaa413c.js></script><script type=text/javascript src=/vue/static/js/vendor.0eae82ab4e0e2a32fd9c.js></script><script type=text/javascript src=/vue/static/js/app.aa1500d2bdd1b2f93122.js></script>

<div class="vue-wrap">
  <test></test>
</div>

</body>
</html>

My package.json file:

{
  "name": "vue-paper-dashboard-pro",
  "version": "1.1.0",
  "description": "A premium Vue.js admin dashboard for bootstrap. Coded by Cristi Jora, designed by Creative Tim.",
  "author": "cristian.jora <cristian.jora@corebuild.eu>",
  "private": true,
  "scripts": {
    "dev": "cross-env ENABLE_ESLINT=false node build/dev-server.js",
    "build": "cross-env ENABLE_ESLINT=false node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "unit:watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --watch",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "chartist": "^0.11.0",
    "easy-pie-chart": "^2.1.7",
    "element-ui": "^2.0.3",
    "fullcalendar": "^3.6.2",
    "google-maps": "^3.2.1",
    "jquery": "^3.2.1",
    "jvectormap-next": "^3.0.0",
    "jwt-decode": "^2.2.0",
    "perfect-scrollbar": "0.7.1",
    "postcss-import": "^11.1.0",
    "postcss-url": "^7.3.2",
    "router": "^1.3.2",
    "sweetalert2": "^6.11.4",
    "vee-validate": "^2.0.0-rc.21",
    "vue": "^2.5.2",
    "vue-axios": "^2.1.1",
    "vue-beautify": "^1.1.3",
    "vue-clickaway": "^2.1.0",
    "vue-form-wizard": "^0.7.0",
    "vue-google-autocomplete": "^1.1.0",
    "vue-nav-tabs": "^0.5.4",
    "vue-notifyjs": "^0.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-component": "^0.9.1",
    "babel-plugin-istanbul": "^4.1.5",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^4.1.2",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "compression-webpack-plugin": "^1.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.1.0",
    "cross-env": "^5.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-node": "^4.2.3",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.1.0",
    "eslint-plugin-vue": "^4.5.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "lolex": "^1.5.2",
    "marked": "^0.3.6",
    "mocha": "^3.2.0",
    "nightwatch": "^0.9.12",
    "node-sass": "^4.5.3",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "raw-loader": "^0.5.1",
    "sass-loader": "^5.0.1",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.0.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "vue-test-utils": "^1.0.0-beta.3",
    "webpack": "^2.7.0",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

Shouldn't VueJs populate the "test" tag directly with HTML? Because in my case all css/js files are loaded ok, if I enter "vm" in console I can see the Vue object, but still, the template part is not inserted in HTML. How can I do that? My page is empty. I want to load multiple components and they should be inserted in the component slots if these are found in HTML.

If you are using it as the root component, you can just directly use that component using render()

import Test from './components/Test.vue'

var vm = new Vue({
  el: '.vue-wrap',
  render: h => h(Test)
});

Common mistakes to avoid while working with Vue.js, Unfortunately, I encountered a lot of issues with Vue.js at the very beginning. guide and use an inline template for your component, you will get a blank page. It helps to gather JavaScript, HTML, and CSS code in a single file. We accomplish this by creating thousands of videos, articles, and interactive  Runtime template compiler: Vue comes with an internal module that is used to compile HTML templates to JavaScript at runtime. If you use a template option that does not use HTML markup at runtime you can use a special build of Vue.js that does not include this module (and is, therefore, smaller and faster). Template literals

Can you try to add template part:

var vm = new Vue({
    el: '.vue-wrap',
    components: { Test },
    template: '<Test/>
});

7 Ways to Define a Component Template in Vue.js, There are plenty of ways you can define a component template in Vue. Inline templates; Render functions; JSX; Single-file components; And the winner is. though, as it's very difficult to work with anything beyond the simplest template. If you use a template option that does not use HTML markup at  <template> <Button type="primary">Click me!</Button> </template> <script> import Button from 'Button.vue' export default { name: 'App', components: { Button } } </script>. In my case, I don't know which component to insert in the template and also where to insert it. This information is only available at runtime.

If you'd want to be able to specify components Vue is using by wrapping it in the "main" <div class="vue-wrap"> you can make use of slots.

var vm = new Vue({
    el: '.vue-wrap',
    template: "<slot></slot>",
    components: { 
        /* all components injected by "slots" */ 
        Test, 
        SomeComponent
    },
});

... then you can inject your <test></test> component by adding it as a child of a main div.

<div class="vue-wrap">
    <test></test>
    <some-component></some-component>
</div>

Otherwise, if you're able to write your template inside Vue components, you should use template key/option as suggested by @latovic.

var vm = new Vue({
    el: '.vue-wrap',
    template: `
        <test></test>
        <some-component></some-component>
    `,
    components: { Test, SomeComponent }
});

If you're building your application, in other words, if you can use .vue files, then you can write template inside your single-file components.

UPDATE (DUE TO QUESTION UPDATES)

In your particular example, try removing Vue.component('test', Tree); asi it may cause some problems because of case in-sensitive names (this way you're creating global component test and you already imported and registered component Test).

Also, as mentioned before, if you want to pass <test></test> to your HTML and not a template, you'd need a <slot></slot>.

import Test from "/path/to/component";

var vm = new Vue({
    el: '.vue-wrap',
    template: "<slot></slot>",
    components: { 
        /* all components injected by "slots" */ 
        Test
    },
});

But if your index.html is completely empty, it's an issue with your build process, which we cannot help with, as we have no information about it.

Adding Vue.js to an Existing Project - Blunt Jackson, Let's say you have an existing web application that is not taking advantage of any Does your legacy app run on one of these? and pre-existing web page: <​DOCTYPE html> <html> <head> <title>Vue Demo #1: The Box App</title> have one class defined in the component template, and another on the component tag? In many Vue projects, global components will be defined using Vue.component, followed by new Vue({ el: '#container' }) to target a container element in the body of every page. This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views.

HTML and Static Assets, Instant Prototyping · Creating a Project · Plugins and Presets · CLI Service The file public/index.html is a template that will be processed with html-webpack-​plugin . During Hard-coded file names do not work with Modern Mode. In templates, you will need to first pass the base URL to your component:. The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.

Handling Edge Cases, This page assumes you've already read the Components Basics. For example, in abstract components that interact with JavaScript APIs instead of rendering HTML, like these hypothetical You could resolve both issues with a programmatic listener: Failed to mount component: template or render function not defined. I'm trying to create a component for a table row. I'm using vue-resource to fetch data from an API created in Laravel. My problem is that the table rows are rendered above the table and not in the tbody as expected.

Components Basics, Some HTML elements, such as <ul> , <ol> , <table> and This will lead to issues when using components with does not apply if you are using string templates from one of the following sources: String templates (e.g. template: '' ) Single-file ( .vue ) components · <script  Assuming someChildProperty is a property on the child component, the example above would not work as intended. The parent’s template should not be aware of the state of a child component. If you need to bind child-scope directives on a component root node, you should do so in the child component’s own template:

Comments
  • don't you have warnings or errors in the browser developers tool?
  • How do you "build the application"? Are you using Vue-CLI, and if so, what version?
  • sudo npm run build, and I copy-paste the generated files from the "dist" folder to my website's "vue" folder. No errors.
  • Yes, I had to create different variables for each component with the Render option. The render option make the template to appear. That's a must have in my case. Thanks.
  • Question: if I have multiple components is it a good practice to render all by default? I want to create a new Vue element for each component that I'm using in a spot.
  • No, if you want to use then in multiple places, yhen you need to use ‘Vue.component’. But if you only want to use it few times you may just consider manually adding then to the ‘components’ property inside the component that will use the component.
  • if I use Vue.component, how can I render it? Because I tried: Vue.use('test', Test); and it wasn't rendered inside the <test></test> spot. It is only rendered when I use: render: h => h(Test)
  • if you use Vue.component to register a component, you don't need to add it to the components property. In the code you included in your question, you used Vue.component and also used added it into the components property which is actually very redundant.
  • Thanks, I'll try it. But I want to load multiple components, so I have to paste all the slots in the template after <test></test>
  • Not working. The index.html file which was described above is empty.
  • Thanks, I'll try it. But I want to load multiple components, so the second case I guess it won't work unless I paste all the slots in the template after <test></test>.
  • Well you can pass as many components and html as you want, the thing is that it needs to be registered in the component your using a slot in, in your case, you can pass more components after <test></test>, but you need to add them all to components option of the Vue instance. See updated answer.
  • Not working. I tried both examples. The index.html file which was described above is empty.
  • Well, if it's empty i think it's a question about the build process, not the vue application itself. Can you add the package.json scripts part to your question? Just so we can see what is ran by sudo npm run build.
  • I just updated the question and I added the [ackage.json file. I'm using a template called: vue-paper-dashboard-pro . It's a good starter.