🚀 Astro Framework7

Framework7 is a free and open source framework to develop mobile, desktop or web apps with native look and feel.

📦 Installation

Quick Install

the astro add command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren’t sure which package manager you’re using, run the first command.) Then, follow the prompts, and type “y” in the terminal (meaning “yes”) for each one.

# Using PNPM
pnpm astro add astro-framework7
# Using NPM
npx astro add astro-framework7
# Using Yarn
yarn astro add astro-framework7

Manual Install

First, install the framework7 & astro-framework7 packages using your package manager. (If you aren’t sure which package manager you’re using, run the first command.)

Using PNPM

pnpm install framework7 astro-framework7

Using NPM

npm install framework7 astro-framework7

Using Yarn

yarn add framework7 astro-framework7

Then, apply this integration to your astro.config.mjs file using the integrations property:

import framework7 from 'astro-framework7';

export default {
  // ...
  integrations: [framework7()]
};

Note

To make sure this integration works properly, it's recommended to put framework7() as the last element in the integrations array.

🥑 Usage

📖 Configuration

Framework7 Docs has a list of options that allow you to customize its behavior. And this Astro integration allow you to pass those options easily in your astro.config.mjs file:

export default defineConfig({
  integrations: [
    framework7({
      ...
    })
  ]
});

Note

Available Options

Here is a list of options, that are allowed to be passed in the config:

export type Framework7Options = {
  ...
};

Caveats

Changelog

Please see the Changelog for more information on what has changed recently.

Acknowledgements