nuxt-community / nuxt7

📱 Full Featured iOS & Android PWA Apps with Nuxt.js and Framework7
https://nuxt7.netlify.com/
MIT License
325 stars 33 forks source link
andriod framework7 framework7io hybrid ios nuxt nuxtjs pwa vue

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

⚔️ Quick Start

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

npx sao@1 -u nuxt-community/nuxt7 nuxt7-app

▶️ Examples

To locally run each example:

🔧 Module options

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

app

Default:

app: {
  theme: 'auto'
}

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

main

Default:

main: {
    main: true,
    pushState: true
}

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

mode

Router mode. Can be hash or history.

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

invertNav

Invert navigation bars to fill style.

disableContextMenu

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

disableSelect

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

rtl

Enable RTL Layout.

themeColor

themes

darkTheme

Enable darkTheme support.

lightTheme

Enable lightTheme support.

colors

App colors.

components

Enabled components. (only used for .less imports)

css

Include Framework7 styles.

customCSS

Include Nuxt7 custom styles.

f7Icons

nclude Framework7 Icons (IOS).

mdIcons

Include MD Icons (Android).

routes

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" },
        ]
      }
    }
}

Please see examples/routable-tabs for a working example.

🤔 Common Questions

Can i use this module for my existing nuxt project?

No. It is highly recommanded to use a standalone project for mobile app.

Why asyncData/middleware is not working?

Framework7Vue has it's own router. You can define state in data() and use async mounted to fill the state.

Middleware also don't work. You can use nuxt plugins instead. (ServerMiddleware are supported in server mode)

How to deploy?

Nuxt7 is designed to make a fully functional PWA app. Users can install app using "Add to Homescreen".

How to make sidepanel working?

The default layout can do the trick. See kitchen-sink/layouts/default.vue for an example.

How to create default 404 route?

Create pages/default.vue file. It will be used as fallback route.

🍳 Development

# Fork and clone git@github.com:nuxt-community/nuxt7.git

# Install dependencies
yarn install

# Start development server (kitchen sink)
yarn dev

License

MIT - Nuxt Community - Pooya Parsa