DEV Community

Cover image for Build Your First Ionic Vue App

Build Your First Ionic Vue App

Aaron K Saunders on December 13, 2019

See Ionic Framework Vue JS eBook & Video Courses Overview This is documentation to duplicate the sample application described in th...
Collapse
 
vuurball profile image
vuurball

Wonderful tutorial Aaron, thanks!
just one question from a total noob..
after npx cap add android how exactly can I get an apk file, so that I can actually put the app on my phone and see it there?
(without using android studio, is there a cli tool?)

Collapse
 
berkmann18 profile image
Maximilian Berkmann

Am I the only getting errors like:

chunk-2a882949.js?1993:13 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at addIcons (chunk-2a882949.js?1993:13)
    at appInitialize (ionic-vue.esm.js?481b:279)
    at Object.install (ionic-vue.esm.js?481b:619)
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5107)
    at eval (main.js?56d7:12)
    at Module../src/main.js (app.js:1134)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.1 (app.js:1147)

In the devtools?

Collapse
 
aaronksaunders profile image
Aaron K Saunders

Link to your project?

Collapse
 
berkmann18 profile image
Maximilian Berkmann
Collapse
 
kescript profile image
Nnamani Kester

Thanks for this article. I love it. But I have a problem. The icons are not displaying in my own setup.

Collapse
 
aaronksaunders profile image
Aaron K Saunders

Check version number of II ionicons and ionic/vue.

Thanks for checking out my content, please take a look at videos that cover this also - youtube.com/channel/UCMCcqbJpyL3LA...

Collapse
 
kescript profile image
Nnamani Kester

Why not send your package.json file here, so I can see the versions

Thread Thread
 
aaronksaunders profile image
Aaron K Saunders
Collapse
 
kescript profile image
Nnamani Kester

I actually installed the same version like you stated i the article

Thread Thread
 
aaronksaunders profile image
Aaron K Saunders

Is there a repo somewhere I can take a peek at?

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
aaronksaunders profile image
Aaron K Saunders

Need more info? Screen shot? Or can you post the repo somewhere for a peek?

Collapse
 
daviddalbusco profile image
David Dal Busco

Thank you for the really interesting tutorial Aaron, specially for the appendix with Capacitor to cover the all process πŸ‘

P.S.: The way ionicons are loaded in comparison to React, Angular or native is really interesting.

Collapse
 
aaronksaunders profile image
Aaron K Saunders

I think there are some things that the Ionic team will clean up before the vue integration comes out of beta; but there was a discussion thread on Reddit about this and I had the content from a class I taught so I figured I would share with the community

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
aaronksaunders profile image
Aaron K Saunders

πŸ€”

Collapse
 
emipmttt profile image
Emiliano Pamont

Hi Arron, a question: why are you use yarn and npm to install dependencies?

Collapse
 
aaronksaunders profile image
Aaron K Saunders

You and use either one and it will work

Collapse
 
navjeetc profile image
Navjeet

That was nice little intro to Ionic and Vue, short and sweet. Really enjoyed building it and got it working on IOS simulator. Do you know when Ionic Vue is planned to come out of Beta?

Collapse
 
aaronksaunders profile image
Aaron K Saunders

Thanks I am glad it worked out,

I think there is a new version of vue coming out so i suspect these components will come out of beta sometime after the next release of vue - I am already using it in a production environment...

More examples here in my repo github.com/aaronksaunders and I am working on some YouTube videos - youtube.com/channel/UCMCcqbJpyL3LA...

Collapse
 
noopurphalak profile image
Noopur Ramakant Phalak

Can you also share a tutorial where you can connect your Ionic app to an offline database?

Collapse
 
aaronksaunders profile image
Aaron K Saunders

did you have a database in mind

Collapse
 
noopurphalak profile image
Noopur Ramakant Phalak

Hi Aaron, any update of this?

Thread Thread
 
aaronksaunders profile image
Aaron K Saunders

coming soon will be the first post of the new year

Collapse
 
noopurphalak profile image
Noopur Ramakant Phalak • Edited

How about SQLite database. Below is the SQLite link to github:
github.com/jepiqueau/capacitor-dat...

Collapse
 
aaronksaunders profile image
Aaron K Saunders

After you get the basics down, here is another vuejs series I have here on dev.to - VueJS Composition API Sample App w/video - DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» buff.ly/2p64FqD

Collapse
 
shahbhavik204 profile image
shah-bhavik204

WHen I am trying to make some changes in Homepage.vue and run on android, it doesnt show up but works fine when run on web.

Collapse
 
aaronksaunders profile image
Aaron K Saunders

is your project somewhere i can look at? what errors are in the log?