Monaca Docs
Search…
Templates

Getting started with Vue 2 & Onsen UI 2

The new Vue with Onsen UI template is a great way to approach mobile development. It can easily be integrated with the Monaca CLI in order to take advantage of all of its features.
On this page, we will demonstrate how to import Vue with Onsen UI template into Monaca CLI.

Step 1: Installing Vue CLI

Open a command line window and type the following command:
1
npm install -g vue-cli
Copied!

Step 2: Importing the template

  1. 1.
    Create a new project based on the template by using the command below:
1
vue init OnsenUI/vue-cordova-webpack projectName
Copied!
2. Navigate to the project folder and run npm install:
1
cd projectName
2
npm install
Copied!

Step 3: Running the template in the Monaca CLI

With the Monaca CLI, you can:
  • create new local projects, import or clone existing projects in
    Monaca Cloud to your host PC.
  • develop Monaca apps with your favourite local code editor.
  • debug your app either with Monaca Debugger or inspector integration.
  • remote build your projects without any local setup.

Prerequisite

If you haven't installed the Monaca CLI yet, please run the following command:
1
npm install -g monaca
Copied!

Run the template

You can build and run the Vue template with the following commands:
  1. 1.
    Build the template for production and generate the www files:
    1
    npm run build
    Copied!
  2. 2.
    Run in the development mode and load the bundles in memory with a hot module replacement:
    1
    npm run dev
    Copied!
3. You can test your app on a real device by installing the Monaca Debugger and running the following command:
1
monaca debug
Copied!
4. Build your template for either iOS and Android easily with this command:
1
monaca remote build --browser
Copied!
These are just a brief view of what you can do with Monaca CLI. If you would like to learn more about it, please refer to the following contents:
Last modified 3mo ago