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.
Use the command below to create a new app using starter template:
npx sao@1 -u nuxt-community/nuxt7 nuxt7-app
To locally run each example:
yarn install
yarn examples/[example name]
http://localhost:3000
Add options in framework7
section inside nuxt.config.js
file.
app
Object
Default:
app: {
theme: 'auto'
}
Framework7 constructor params. See App Component and App Docs for all available parameters.
main
Object
Default:
main: {
main: true,
pushState: true
}
Props passed to the main <f7-view>
. See View Component docs for more info.
mode
String
history
Router mode. Can be hash
or history
.
The history
mode enables SEO friendly routes by setting main.pushStateSeparator
value to ''
.
invertNav
boolean
true
Invert navigation bars to fill style.
disableContextMenu
boolean
true
Disable context menu with long touch. (Recommanded to enable disableSelect
too)
disableSelect
boolean
true
Disable selection/copy in UIWebView. (Useful to use with disableContextMenu
)
rtl
boolean
false
Enable RTL Layout.
themeColor
string
Default: #007aff
(Dodger Blue)
Primary app color.
themes
array
darkTheme
boolean
true
Enable darkTheme support.
lightTheme
boolean
true
Enable lightTheme support.
colors
object
App colors.
components
array
Enabled components. (only used for .less
imports)
css
Boolean
true
Include Framework7 styles.
customCSS
Boolean
true
Include Nuxt7 custom styles.
f7Icons
Boolean
true
nclude Framework7 Icons (IOS).
mdIcons
Boolean
true
Include MD Icons (Android).
routes
Boolean
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.
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".
nuxt generate
to make a static versionHow 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.
# Fork and clone git@github.com:nuxt-community/nuxt7.git
# Install dependencies
yarn install
# Start development server (kitchen sink)
yarn dev
MIT - Nuxt Community - Pooya Parsa