Nine Pedestrians Mesmerized

    nuxt7

    4.2.0 • Public • Published

    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 5.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@1 -u nuxt-community/nuxt7 nuxt7-app

    ▶️ Examples

    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.

    lightTheme

    • Type: boolean
    • Default: true

    Enable lightTheme support.

    colors

    App colors.

    components

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

    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".

    • Use nuxt generate to make a static version
    • Deploy it on your own server or use free services, now or netlify or surge

    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

    Keywords

    none

    Install

    npm i nuxt7

    DownloadsWeekly Downloads

    156

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    687 kB

    Total Files

    21

    Last publish

    Collaborators

    • nolimits4web
    • pi0