Framework7

To begin building with Framework7, follow these core steps:

1. Read the Introduction: Understand the core concepts and capabilities.
2. Follow the Installation Guide: Set up the framework in your development environment.
3. Define your App Layout: Plan the structure of your mobile application.
4. Initialize your App: Use the Framework7 API to boot your application instance.

Detailed guides are available at the official documentation site.

To begin building with Framework7 Vue, you should follow these core implementation steps:

1. Installation: Follow the official installation guide to add the necessary dependencies to your project.
2. App Layout: Define your application's structural layout.
3. Initialize App: Set up the Framework7 instance within your Vue application.
4. Navigation Router: Configure the router to handle page transitions and mobile-style navigation.

You can also jumpstart your development using official Starter App Templates.

Framework7 React allows you to build mobile applications by combining the React framework with the Framework7 mobile UI components. To begin building, you should follow these core implementation steps:

1. Installation: Follow the official installation guide to add the necessary dependencies to your project.
2. App Layout: Define your application's structure using Framework7's layout components.
3. Initialize App: Set up the Framework7 instance to manage the application lifecycle.
4. Navigation Router: Configure the router to handle page transitions and navigation within your mobile app.

For pre-configured setups, you can use the Starter App Templates to jumpstart your development.

To begin developing with the Framework7 source repository, install all necessary dependencies using npm:

$ npm install

To begin building a mobile app with Framework7 and Svelte, follow these key steps:

1. Installation: Follow the official Installation Guide to set up your environment.
2. Templates: Use Starter App Templates to jumpstart your project with a pre-configured structure.
3. App Layout: Define your application's structure using the App Layout patterns.
4. Initialization: Use the Initialize App process to boot up the Framework7 instance within your Svelte application.
5. Navigation: Implement page transitions and routing using the Navigation Router.

The Kitchen Sink allows you to run and explore the Framework7 components in a development environment. These commands build the required development version of the package before running the corresponding Kitchen Sink.

• core: Builds Core (vanilla JS) and runs the Core Kitchen Sink.
• react: Builds the Framework7 React package and runs the React Kitchen Sink.
• vue: Builds the Framework7 Vue package and runs the Vue Kitchen Sink.
• svelte: Builds the Framework7 Svelte package and runs the Svelte Kitchen Sink.

# Example: Run the Vue Kitchen Sink
npm run vue

The babel-svelte.config.js file defines the Babel presets used when compiling Svelte components within the Framework7 ecosystem. It primarily controls the module transformation behavior via the MODULES environment variable.

To control whether Babel transforms ES modules, set the MODULES environment variable:

• If MODULES is set to 'esm', module transformation is disabled (set to false).
• If MODULES is set to 'false', module transformation is disabled.
• Otherwise, the value of MODULES is passed directly to @babel/preset-env to determine the module transformation strategy.

// Example: Disabling module transformation via environment variable
MODULES=esm npx framework7-cli build

The Babel configuration for Framework7 Vue projects uses the MODULES environment variable to control how modules are transformed.

• If MODULES is set to 'esm', the configuration forces modules: false to preserve ES modules (useful for tree-shaking in bundlers like Webpack or Rollup).
• If MODULES is set to 'false', it also forces modules: false.
• Otherwise, the value of MODULES is passed directly to @babel/preset-env.

The configuration also enables loose: true mode in @babel/preset-env to produce faster, more lightweight code.

# Example: Preserving ES modules for tree-shaking
MODULES=esm npm run build