title: Inserting VueJS component template in HTML page not working
body: <p>I have the following main.js:</p>
  
  <pre><code>import Test from './components/Test.vue'
  
  Vue.component('test', Test);
  
  var vm = new Vue({
      el: '.vue-wrap',
      components: { Test },
  });
  window.vm = vm;
  </code></pre>
  
  <p>And I have the folllowing Test.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;li&gt;
          Hello World
      &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'Test',
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I build the application and I copy the content of "dist" folder in my website's "vue" folder. I have the following HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=utf-8&gt;&lt;link rel=apple-touch-icon sizes=76x76 href=static/img/apple-icon.png&gt;&lt;link rel=icon type=image/png sizes=96x96 href=static/img/favicon.png&gt;&lt;meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"&gt;&lt;title&gt;My App!&lt;/title&gt;&lt;meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"&gt;&lt;link type=text/css href="https://fonts.googleapis.com/css?family=Muli:400,300" rel=stylesheet&gt;&lt;link type=text/css href="https://fonts.googleapis.com/css?family=Montserrat" rel=stylesheet&gt;&lt;link type=text/css href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel=stylesheet&gt;&lt;link type=text/css href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet&gt;&lt;link href=static/css/themify-icons.css rel=stylesheet&gt;&lt;link href=/vue/static/css/app.d9b210b92ea60ad0856c8dc063cccfec.css rel=stylesheet&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=wrapper id=app&gt;&lt;/div&gt;&lt;script type=text/javascript src=/vue/static/js/manifest.bdf9878acc459aaa413c.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=/vue/static/js/vendor.0eae82ab4e0e2a32fd9c.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=/vue/static/js/app.aa1500d2bdd1b2f93122.js&gt;&lt;/script&gt;
  
  &lt;div class="vue-wrap"&gt;
    &lt;test&gt;&lt;/test&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My package.json file:</p>
  
  <pre><code>{
    "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 &lt;cristian.jora@corebuild.eu&gt;",
    "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 &amp;&amp; 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": "&gt;= 4.0.0",
      "npm": "&gt;= 3.0.0"
    }
  }
  </code></pre>
  
  <p>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. </p>