[Vuejs]-Unable to access vue component from a jsp page

by

0👍

✅

When you loading Vue as like this.

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>

Then you have to keep all in .js files. Dont write import statements.Even webpack will do same process after build all es6 will convert to js and it will include in kind of app.87cbdfb9.js 

   <script src="/your-app/js/app.87cbdfb9.js"></script>

And this will include in your main index.html file like above

** For Standalone without webpack ***
then follow like this

<html>
<body>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 <!-- templates for your components -->
  <template id="assign-list">
    <div>test</div>
  </template>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
      <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> 

      <!-- Your Vue Root component should be last -->
      <script type="text/javascript" src="/app/AssignList.js"></script> 

    </body>
    </html>

Your AssignList.js file should like 

var AssignList = Vue.component('assign-list',
  {
    template: '#assign-list', // should match the ID of template tag
    data: function()
    {

    },
    methods:
    {
    }
  });

Leave a comment