Migration from Framework7 v6 to v7

Package
Dark Mode
Calendar
Picker
Swiper v8
Photo Browser

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

Package

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 Mode

Dark "theme" term has been renamed to dark "mode" in v7:

theme-dark CSS class added to elements (or to <html> element) to make layout dark has been renamed to just dark
autoDarkTheme app parameter has been renamed to autoDarkMode
darkThemeChange app event has been renamed to darkModeChange
app.darkTheme app boolean prop has been renamed to app.darkMode
app.enableAutoDarkTheme() method has been renamed to app.enableAutoDarkMode() method
app.disableAutoDarkTheme() method has been renamed to app.disableAutoDarkMode() method
in React, Vue and Svelte components themeDark prop has been renamed to dark prop

Calendar

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

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

Swiper v8

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

Photo Browser by default now uses Swiper's CSS mode on iOS and Android devices, so make sure it still works properly for you