nuxt7

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.

app

• Type: Object

Default:

app: {
  theme: 'auto'
}

Framework7 constructor params. See App Component and App Docs for all available parameters.

main

• Type: Object

Default:

main: {
    main: true,
    pushState: true
}

Props passed to the main <f7-view>. See View Component docs for more info.

mode

• Type: String
• Default: history

Router mode. Can be hash or history.

The history mode enables SEO friendly routes by setting main.pushStateSeparator value to ''.

invertNav

• Type: boolean
• Default: true

Invert navigation bars to fill style.

disableContextMenu

• Type: boolean
• Default: true

Disable context menu with long touch. (Recommanded to enable disableSelect too)

disableSelect

• Type: boolean
• Default: true

Disable selection/copy in UIWebView. (Useful to use with disableContextMenu)

rtl

• Type: boolean
• Default: false

Enable RTL Layout.

themeColor

• Type: string
• Default: #007aff (Dodger Blue)

Primary app color.

themes

• Type: array
• Default: `['ios', 'md']

darkTheme

• Type: boolean
• Default: true

Enable darkTheme support.

colors

• Type: object
• Default: See lib/build-config.js

App colors.

components

• Type: array
• Default: See lib/build-config.js

Enabled components. (only used for .less imports)

css

• Type: Boolean
• Default: true

Include Framework7 styles.

customCSS

• Type: Boolean
• Default: true

Include Nuxt7 custom styles.

f7Icons

• Type: Boolean
• Default: true

nclude Framework7 Icons (IOS).

mdIcons

• Type: Boolean
• Default: true

Include MD Icons (Android).

routes

• Type: Boolean
• Default: true

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