How to properly convert a Vue application to Ionic 4 Vue? - ionic-framework

I'm trying to convert an existing VueJS project to use Ionic 4 and Ionic Native plugins. It's my first time using Ionic 4 and it looks like the Ionic CLI only allows you to build Angular based apps so far. The Vue integration needs to be done manually.
The documentation I've found so far allows me to consume Ionic components but does not seem to be enough to properly setup Ionic in my project.
After going through the steps and finally adding Vue.use(Ionic) to my main entry point, running ionic --help still tells me that my project is not an Ionic project, probably because I do not have a ionic.config.json available at root level. I then run ionic init, this config file gets generated, but it is now telling me to provide the ionic:serve npm script so that it can serve my project ("type": "custom"). How can I setup all the required scripts that Ionic needs ?
I will need to have this setup to be able to add Ionic Native plugins, build my app on different platforms, etc.
I could not find any information so far neither in the docs, nor in here.
Does anyone have further information about this ?

I know it's a bit late but it can be helpful for someone else. I'm in the same situation, and yes, now it's possible. From ionic docs:
https://ionicframework.com/docs/intro/cdn#ionic-vue

Related

IONIC error with NPM (deprecated warning)

in my old ionic version i was able to run and install ionic properly.
but while creating a new project in ionic i get this error
please help me out.
C:\>ionic start
Every great app needs a name!
Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply name,
the first argument to ionic start.
? Project name: sumith
Let's pick the perfect starter template!
Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.
? Starter template: blank
√ Preparing directory .\sumith - done!
√ Downloading and extracting blank starter - done!
Installing dependencies may take several minutes.
* IONIC DEVAPP *
Speed up development with the Ionic DevApp, our fast, on-device testing mobile app
> npm i
npm WARN deprecated circular-json#0.5.9: CircularJSON is in maintenance
only, flatted is its successor.
[ ..............] / fetchMetadata: sill resolveWithNewModule
punycode#2.1.1 checking installable status
set NODE_TLS_REJECT_UNAUTHORIZED=0 before running ionic start.

Can i run the ionic v1 project when i have ionic CLI 3.0.0

Now i have the latest version of ionic 3.0.0. My ionic version: 3.0.0.
And my ionic info:
global packages:
#ionic/cli-utils : 1.0.0
Ionic CLI : 3.0.0
System:
Node : v7.3.0
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.0
ios-sim : 5.0.13
Now i have two question in this. I searched , but not able to get the clear. If any one can answer. It will be helpful for many new bie like me.
So,
1.Now i have ionic 3.0.0. Then if i want to open the project in ionic v2. i will give ` ionic start newapp blank --v2 or (--ts_)'. And i will use some updated plugin having in ionic 3.0.0. Does it will work out. or i need to create a seperate project for ionic version 3 ??
Now i have old ionic 1 project that i am still working on. So once i update my ionic to3.0.0. Now what i done is :
ionic start newapp blank --v1 then i copied my old project www folder to this newapp and i replaced it.
My question is. Still can i use angular js1 to code for this project also. And while make ionic release means when i want to put it in my app store. Does any problem will occur. Because i have create this project as --v1.
If yes when i create a new project ionic start newapp blank --v1 its asking me Link this app to your Ionic Dashboard to use tools like Ionic View? y/N : what should i need to do
Please clarify me..thanks in advance
Using the ionic-cli version 3.0 you should be able to work on all versions of ionic projects.
The new cli will create an ionic v3 app by default. If you want to create an ionic v1 app, you need to add --v1. But if you are starting with a new app, I strongly recommend going for v2+.
Depending on the version your ionic app has, you need to add some additional plugins:
#ionic/cli-plugin-ionic-angular – Ionic Angular project plugin that provides useful build tools and generators. (ionic v2+)
#ionic/cli-plugin-ionic1 – Ionic 1 project plugin that has functionality ported from the old CLI.
#ionic/cli-plugin-cordova – Essential for an Ionic/Cordova app.
#ionic/cli-plugin-proxy – For proxying CLI requests through a firewall.
I can't tell you if you need to link your app to the dashboard. If you are using the Ionic services (Push, View, etc), then it makes sense.
That being said, I have experienced quite a few "bugs" or inconsistent behaviour with the new cli, so you might need to downgrade if something doesn't work.
I had this same worry when I updated my Ionic to v3 (CLI 3.1.2). They seem to really be pushing to use their cloud services (obviously, they want to start making some money on it).
When I tried the old v1 command:
ionic build ios
I received:
The build command has been renamed. To find out more, run:
ionic cordova build --help
So, then I tried
ionic covdova build ios
That failed with this:
ionic package build ios
[ERROR] Your project file (./ionic.config.json) does not contain 'app_id'. Run ionic link.
So, after looking around a bit, I used this command and it worked:
ionic cordova build ios --v1
It asked me to install a couple of things, then chugged out a new successful build. All good.
Please use following command as I had trouble with "--v1"
ionic start newapp blank --type=ionic1
As mentioned by #Samuel.
Add Ionic 1 CLI to the devDependency list. Open package.json file in the project directory and add the following line to devDependencies.
"#ionic/cli-framework": "^1.0.0-rc.2"
Example package.json:
Running ionic repair removed package.json and node_modules then, if prompted, run npm audit fix, and then you will be asked to Install #angular/cli?

Ionic platform add - do I need to run this every time project is checked out?

I have a team working on an ionic 2 project. Do I need to run:
ionic platform add ios
ionic platform add android
on each team members computer or is this platform configuration saved somewhere and I just need to run a command to have all the defined platforms setup?
In your updated setup, run :
ionic state save
This will add all your platform and plugin details to your package.json.
After the install in other systems, if platforms are not set,
do:
ionic state restore
No need to run every time. one time is enough, it will create supporting files first time run.

How do I install a specific version of crosswalk using ionic cli2

I currently have an ionic 1 project, but have just switched to using ionic cli2. I previously used to add crosswalk into my project, by running the following command, as mentioned here.
ionic browser add crosswalk
However, ionic cli2 no longer supports the browser command, and I am unsure how to install it in the correct way.
Any help would be appreciated.
It seems the answer is as follows:
I need to run
ionic plugin add cordova-plugin-crosswalk-webview

Where to get .xap file in Windows using ionic build?

I am using Ionic framework for my project. As per ionic build I have used the build command for windows:
ionic build windows
After the build I get the file structure as below:
The issue is I'm not able to figure out were do I get the .XAP file inside the platform/windows folder and I'm completely new on Windows build.
I'm just posting this as an answer, to which we came in the comments under the OP's question:
Add the windows phone platform: ionic platform add wp8.
Build for wp8: ionic build wp8.
The file CordovaAppProj_Debug_AnyCPU.xap is the one you're looking for.
However, I would like to turn your attention to these few posts:
http://blog.vjrantal.net/2015/01/08/experiences-with-ionic-on-windows-phone-8-1/
http://blogs.msdn.com/b/msdn_answers/archive/2015/02/10/running-cordova-apps-on-windows-and-windows-phone-8-1-using-ionic-angularjs-and-other-frameworks.aspx
http://appfoundry.be/blog/2014/10/16/ionic-windows-phone
which basically confirm what the official Ionic team says that the platforms wp8 and windows in general are not yet fully supported; but they hope they soon will be.