To see this working, head to your live site.

Setup Vue.js with Phonegap without using template or framework

I am just a newbie with Vue.js and Phonegap. Please help me in implementing Vue.js with Phonegap without using any template or framework. Just a simple listing example will do. All help will be appreciated. Thank you!

1 comment

Answers (1)

AnswerDeveloper

Jan 04

Here's an example of how you can use Vue.js with PhoneGap to create a simple list:

First, create a new PhoneGap project using the phonegap create command:


phonegap create my-app
cd my-app

Next, install Vue.js by running the following command:


npm install vue

Create an index.html file in the www directory of your PhoneGap project, and add the following code to it:


<html><head><title>Vue.js with PhoneGap</title></head><body><!-- Add a div element that will be used as the root element for the Vue app --><div id="app"><!-- Add a list element that will display the items --><ul><!-- Use the v-for directive to iterate over the items array and create a list item for each item --><li v-for="item in items" v-bind:key="item">{{ item }}</li></ul></div><!-- Include the Vue.js library --><script src="node_modules/vue/dist/vue.js"></script><!-- Add a script to create the Vue app --><script>// Create a new Vue instancenew Vue({
      // Set the root element of the app to the div with the ID "app"el: '#app',
      // Set the initial data for the appdata: {
        items: ['Item 1', 'Item 2', 'Item 3']
      }
    });
  </script></body></html>

Finally, build and run the app using the phonegap run command:


phonegap run

This should launch the app in your browser or on your phone, and you should see a list of items displayed on the screen.