Migration from Framework7 v6 to v7
In this article we will walk through most of the breaking changes to check what needs to be done to migrate your app from Framework7 v6 to Framework7 v7.
You can also check the full changelog here
Core version has new package structure, it is now uses pure ES module structure so you may need to tweak your imports to match package exports.
So if you have something like this in v6:
import Framework7 from 'framework7' import Searchbar from 'framework7/components/searchbar/searchbar.js' import 'framework7/framework7.css' import 'framework7/components/searchbar/searchbar.css'
it should be changed to:
import Framework7 from 'framework7' import Searchbar from 'framework7/components/searchbar' import 'framework7/css' import 'framework7/components/searchbar/css'
Dark "theme" term has been renamed to dark "mode" in v7:
theme-darkCSS class added to elements (or to
<html>element) to make layout dark has been renamed to just
autoDarkThemeapp parameter has been renamed to
darkThemeChangeapp event has been renamed to
app.darkThemeapp boolean prop has been renamed to
app.enableAutoDarkTheme()method has been renamed to
app.disableAutoDarkTheme()method has been renamed to
- in React, Vue and Svelte components
themeDarkprop has been renamed to
Calendar component has updated design and Moth/Year/Time pickers are now opened in popovers. So make sure it doesn't break your design if you did some CSS/JS tweaks there
Picker component has been reworked to use CSS Scroll Snap API for smoother experience. So make sure it doesn't break your design if you did some CSS/JS tweaks there
Framework7 v7 comes with all new Swiper version 8 which has a lot of new features and bunch of API changes since Swiper v6 (that was in Framework7 v6).
It is recommended to check Swiper update guides on what is new:
Photo Browser by default now uses Swiper's CSS mode on iOS and Android devices, so make sure it still works properly for you