Ionic 6 Vue Capacitor Full App
  • What is Ionic 6 Vue Capacitor Full App?
  • Understand the Frameworks
  • Template Features
  • Vue app setup
    • Initial Setup
    • Running the app
    • Building App on device
    • Deploying app as PWA
      • Deploy PWA on Firebase
  • Firebase setup
    • New Firebase Project Setup
    • Firebase Integration Into User App
  • Vue basics
    • Two way to use this Template
    • Removing a Page / Component
    • Removing a plugin
  • Group 3
    • Setting up Ionic Vue Apps (Basics)
  • Extras
    • Troubleshooting
    • FAQ
    • Changelog
Powered by GitBook
On this page
  1. Vue app setup

Running the app

Steps to follow for running your app on browser, device or deploy as PWA

PreviousInitial SetupNextBuilding App on device

Last updated 3 years ago

Run the app on Browser

Once you have the initial setup done, it's time to run your app. First we'll run the app in development environment. In development environment, your app runs in a browser (of your choice). It is recommended to make all changes and development while running the app on browser . Running on device while developing will be too time consuming.

To run the app on browser, run

$ ionic serve

on your command line, inside your project folder. This will build the project and deploy it on a localhost url (usually it is localhost:8100). Your command line will look like this

The initial deploy process will take some time when it creates "chunks" of code pieces. Once you see compiled successfully , you are good to go. Your browser window will open automatically and load the app in a full screen view.

Sometimes, the CLI does not open the browser automatically. In such case, open your browser and type URL localhost:8100 to start the app.

To change the app to a device view, right click anywhere on the browser and choose Inspect Elementand choose device mode. The app will look like this in device mode

More about browser development tools can be found out in following links

Chrome Dev Tools
Firefox Dev Tools