Ionic Vue Quickstart - Ionic Documentation
1 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Ionic Vue Quickstart
Environment Setup
CON T EN T S
CLI Installation
What is Ionic Framework?
Packages & CDN
Creating a project with the Ionic CLI
Next Steps
Build your way with TypeScript or JavaScript
Developing
A look at a Vue Component
Initializing the router
Starting
A component with style
Previewing
Creating a new Route
Scaffolding
Calling Methods on Components
Developing for iOS
Adding Icons
Developing for Android
Optimizing Your Build
Development Tips
Build a Native App
Hardware Back Button
Where to go from here
Keyboard
Layout
Structure
Responsive Grid
What is Ionic Framework?
Global Stylesheets
First off, if you're new here, welcome! Ionic Framework is a free and open source
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
2 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Along
with the UICLI
components,
Ionic Framework also provides
a command
Community
Supportline tool for
Guide
Components
Native
creating new apps, as well as deploying to the various platforms we support.
React
In this guide, we will go over the basics of both Vue and Ionic Framework, including any
Getting Started
Overview
Environment Setup
CLI Installation
Ionic Framework specific features. If you are familiar with Vue, enjoy the guide and learn
something new about Ionic Framework. If you are not familiar with either, no worries!
This guide will cover the basics and provide enough information to get an app up and
running.
Packages & CDN
Next Steps
Developing
Starting
Previewing
Creating a project with the Ionic CLI
To begin, let's install the latest version of the Ionic CLI.
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
From here, the global command ionic will allow for the creation of a Vue project with
Ionic Framework and any other dependencies. To create a new project, run the following
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
3 of 37
https://ionicframework.com/docs/vue/quickstart
From here, we run ionic serve and have our project running in the browser.
Docs
Framework
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Guide
Components
CLI
Native
Community
Support
Build your way with TypeScript or JavaScript
We love TypeScript at Ionic, and have believed for quite some time now that it’s a great
tool for building scalable apps. That said, we know how much the Vue community values
simplicity – in their tooling, languages, and more. In fact, it’s likely what drew you to Vue
in the first place. Start simple – then scale up as needed.
So, if you’d prefer to use JavaScript instead of TypeScript, you can. After generating an
Ionic Vue app, follow these steps:
1. Remove TypeScript dependencies:
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
4 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Remove lang="ts"
from the script tags in any Community
of your Vue components
that
Support
Guide 6. Components
CLI Native
have them. In a blank Ionic Vue app, this should only be App.vue and
React
views/Home.vue .
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
A look at a Vue Component
The base of our app will be in the src directory, and the main entry point will be our
main.ts file. If we open our project in a code editor and open main.ts , we should
see the following:
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
Copy
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
5 of 37
https://ionicframework.com/docs/vue/quickstart
The third import is the root component for our app, simply named App . This is our first
Docs
Framework
React
Community
Guide
CLI will
Native
Vue Components
component and
be used in the bootstrapping process
for ourSupport
Vue app.
The fourth import gets our routing configuration. We will look at this more in depth
later.
Getting Started
If we open App.vue we should see the following:
Overview
Environment Setup
HTML
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Copy
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
6 of 37
Docs
https://ionicframework.com/docs/vue/quickstart
To use a component in Vue, you must first import it. So for Ionic Framework, this means
Framework
React
Guide
Components
CLI
Native
Community
Support
anytime we want to use a Button or a Card, it must be added to our imports. In the case
of our App component, we are using IonApp and IonRouterOutlet . You can also
register components globally if you find yourself importing the same components
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Copy
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
7 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Copy
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Copy
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
8 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Copy
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
9 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
10 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
Copy
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
11 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Copy
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
12 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
13 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
14 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
15 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Copy
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Copy
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
16 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Copy
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
17 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
18 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
Copy
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
19 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Copy
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
20 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Copy
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
21 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Copy
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
22 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Copy
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
23 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Copy
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
24 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
25 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
Copy
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
26 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Copy
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
27 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Copy
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
28 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
Copy
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
29 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Copy
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
30 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
31 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Copy
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
Copy
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
32 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
33 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
34 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
35 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
36 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM
Ionic Vue Quickstart - Ionic Documentation
37 of 37
Docs
Framework
https://ionicframework.com/docs/vue/quickstart
Guide
Components
CLI
Native
Community
Support
React
Getting Started
Overview
Environment Setup
CLI Installation
Packages & CDN
Next Steps
Developing
Starting
Previewing
Scaffolding
Developing for iOS
Developing for Android
Development Tips
Hardware Back Button
Keyboard
Layout
Structure
Responsive Grid
Global Stylesheets
10/31/2021, 1:28 PM