Migration from Framework7 v7 to v8

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 v7 to Framework7 v8.

You can also check the full changelog here

Removed Aurora Theme

We decided to focus exclusively on mobile applications and interfaces, which is what the Framework7 was originally created for. Therefore it was decided to remove Aurora theme.

Removed Functionality

The following components, modules and functionality have been removed:

• Elevation - removed as such shadows are not used in Material Design anymore
• Lazy - removed in favor of native loading="lazy"
• Menu - removed as was intended to be used in Aurora theme
• Appbar - removed as was intended to be used in Aurora theme
• Request - removed in favor of native fetch
• Inline Input Labels - removed as such layouts are rarely used in modern apps
• List Item Cell & Row - removed as not really useful
• Removed stackPages functionality in router that allows you to load pages from existing DOM elements, and keep previous pages in DOM. It is recommended to use Router Components instead
• Removed expandInput functionality in Autocomplete as it was indented for inline inputs labels (which are removed now)
• Browser lazy components - components files with .lazy prefix to be loaded by browser are removed now. Use bundler instead

App id, version, language

These app parameters and properties have been removed as anyway they not used anywhere in the app.

Dark Mode

• autoDarkMode app parameter has been renamed to darkMode: 'auto'
• app.enableAutoDarkTheme() and app.disableAutoDarkTheme() method have been removed in favor of new app.setDarkMode('auto'), app.setDarkMode(false), app.setDarkMode(true) methods

Colors

Material You design arrives in Framework7 v8 with a lot of changes to color theming:

• Now, primary theme color and all additional colors must be specified in app.colors parameters, rather than in CSS
• utils.colorThemeCSSProperties() now returns object with ios, md, light and dark CSS vars
• A lot of CSS variables related to theme colors are changed now (especially in Material theme)
• color-theme-[$color] classes (and components props) have been removed as color-[$color] classes now do the same
• Check updated Color Themes documentation

Swiper v9

Framework7 v8 comes with all new Swiper version 9 which has a lot of new features, especially new Swiper Element web component.

• swiper-init class support (in Core version) to auto init Swiper has been removed in favor of Swiper Element
• Swipeable Tabs now require to use Swiper Element
• Swiper React, Svelte, Vue components have been removed from Framework7 package in favor of Swiper Element
• It is recommended to check Swiper v9 migration guide

Grid

• New simplified grid layout and sizes
• Resizable grid functionality has been removed

Timeline

Timeline uses new classes according to new grid to specify amount of columns in horizontal timeline

Searchbar

hideDividers parameter has been renamed to hideGroupTitles.

Popover

angle parameter (prop) and layout class has been renamed to arrow.

Hairlines

Hairlines helper classes have been removed, as most of components now have outline/no-outline classes

Block

By default strong block is rendered now without outline (borders), new block-outline class is required for that

List

• By default list is rendered now without outline (borders), new list-outline class is required for that
• By default list is rendered now without background, new list-strong class is required for that
• By default list is rendered now without dividers (borders between list items), new list-dividers class is required for that

Card

• By default card is rendered now without shadow, new card-raised class is required for that
• By default card is rendered now without dividers (border) between card header and footer, new card-header-divider and card-footer-divider classes are required for that