I have a large Cordova app built on Framework7 Vue that I’d like to explore switching to Ionic Vue. Has anyone else gone through this process?
It has over 50 routable pages (some quite complex) not including popups, so I couldn’t possibly make this switch in one release cycle. Ideally, it would be a gradual transition, perhaps by first switching to using Ionic routing with F7 pages hosted inside ionic pages, or something like that. Is that feasible? Of course, the best way to answer that question is to try it, but just checking with the forum to see if others have tried this approach?
I don’t have any experience with F7 but your plan seems like it would work. For Ionic routing to work correctly, you will have to wrap all your pages in an ion-page and ion-content tag. You might not need ion-content but definitely need ion-page.
I only use the basic building blocks of Ionic in our Vue app for the native feel and then use TailwindCSS for most of our styles and custom feel so you should be able to do something similar with F7.
Our main CSS import file looks like this (as you can see, not using the Ionic utilities):
/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css'
import 'tailwindcss/base.css'
/* Basic CSS for apps built with Ionic */
// import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css'
import '@ionic/vue/css/typography.css'
import 'tailwindcss/components.css'
/* Optional CSS utils that can be commented out */
// import '@ionic/vue/css/padding.css';
// import '@ionic/vue/css/float-elements.css';
// import '@ionic/vue/css/text-alignment.css';
// import '@ionic/vue/css/text-transformation.css';
// import '@ionic/vue/css/flex-utils.css';
// import '@ionic/vue/css/display.css';
import 'tailwindcss/utilities.css'
/* Theme */
import './fonts.css'
import './variables.css'
import './colors.css'
import './styles.css'
You might also want to read up on the Ionic Lifecycle and Routing.