zahramajd / nuxt7

📱 Full Featured iOS & Android PWA Apps with Nuxt.js and Framework7

Full Featured iOS & Android PWA Apps with Nuxt.js and Framework7

Nuxt7 integrates universal nuxt.js applications with Framework7-Vue to rapidly create efficient and feature-reach PWA mobile applications with help of pwa-module. Production builds can be statically hosted or running offline.

📖 Release Notes

✨ Features

• Fully compatible with framework7 2.x
• Development mode with hot reloading
• Optimized production builds suitable for 100% static hosting
• Fully PWA compatible out of the box
• Page based router for Framework7
• Use vuex store in your apps
• Familiar nuxt.js development experience with a super easy learning curve

⚔️ Quick Start

Use the command below to create a new app using starter template:

> npx sao nuxt-community/nuxt7 nuxt7-app

▶️ Examples

• kitchen-sink - online version
• with-params

To locally run each example:

• Clone this repository
• Install dependencies using yarn install
• Run examples in development mode using yarn examples/[example name]
• Navigate to http://localhost:3000

🔧 Module options

Add options in framework7 section inside nuxt.config.js file.

Option	Type	Default	Description
css	Boolean	true	Include Framework7 styles (Useful to disable and provide your own)
rtl	Boolean	false	Enable RTL layout
f7Icons	Boolean	true	Include Framework7 Icons (IOS)
mdIcons	Boolean	true	Include MD Icons
pwa	Boolean	true	Enable @nuxtjs/pwa module
routes	Object	true	Route overrides (see below)
mode	String	hash	Router mode. Can be hash or history
view	Object	defaults	Options passed to root view of framework7
build	Object	framework7 defaults	Framework7 build config used for customizing less variables
themeColor	String	undefined	If specified, automatically sets all global theme colors to this value

routes override

Routes are auto generated using pages directory structure. However if you need to make more customization (Like adding routable tabs) this option may be used.

Example: (nuxt.config.js)

framework7: {
    routes: {
      'tabs-routable': {
        tabs: [
          { path: "/", id: "tab1" },
          { path: "/tab2/", id: "tab2" },
          { path: "/tab3/", id: "tab3" },
        ]
      }
    }
}

🍳 Development

# Fork and clone [e-mail]:nuxt-community/nuxt7.git

# Install dependencies
yarn install

# Start development server (kitchen sink)
yarn dev

License

MIT - Nuxt Community - Pooya Parsa