Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-community/nuxt7
📱 Full Featured iOS & Android PWA Apps with Nuxt.js and Framework7
https://github.com/nuxt-community/nuxt7
andriod framework7 framework7io hybrid ios nuxt nuxtjs pwa vue
Last synced: 24 days ago
JSON representation
📱 Full Featured iOS & Android PWA Apps with Nuxt.js and Framework7
- Host: GitHub
- URL: https://github.com/nuxt-community/nuxt7
- Owner: nuxt-community
- License: mit
- Created: 2017-09-20T18:45:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-18T17:05:52.000Z (about 2 months ago)
- Last Synced: 2024-09-30T02:23:21.962Z (about 1 month ago)
- Topics: andriod, framework7, framework7io, hybrid, ios, nuxt, nuxtjs, pwa, vue
- Language: TypeScript
- Homepage: https://nuxt7.netlify.com/
- Size: 2.49 MB
- Stars: 325
- Watchers: 15
- Forks: 33
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Full Featured iOS & Android PWA Apps with Nuxt.js and Framework7
Nuxt7 integrates universal nuxt.js applications with [Framework7](https://framework7.io/)[-Vue](https://framework7.io/vue)
to rapidly create efficient and feature-reach [PWA](https://developers.google.com/web/progressive-web-apps) mobile applications with help of [pwa-module](https://github.com/nuxt-community/pwa-module). Production builds can be statically hosted or running offline.
## ✨ 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:
```bash
npx sao@1 -u nuxt-community/nuxt7 nuxt7-app
```
## ▶️ Examples
* [kitchen-sink](./examples/kitchen-sink) - [online version](https://nuxt7.netlify.com)
* [with-params](./examples/with-params)
* [routable-tabs](./examples/routable-tabs)
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:
```js
app: {
theme: 'auto'
}
```
Framework7 constructor params. See [App Component](https://framework7.io/vue/app.html) and [App Docs](https://framework7.io/docs/app.html) for all available parameters.
### `main`
- Type: `Object`
Default:
```js
main: {
main: true,
pushState: true
}
```
Props passed to the **main** ``. See [View Component](https://framework7.io/vue/view.html) 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`
- Type: `object`
- Default: See [lib/build-config.js](lib/build-config.js)
App colors.
### `components`
- Type: `array`
- Default: See [lib/build-config.js](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**)
```js
framework7: {
routes: {
'tabs-routable': {
tabs: [
{ path: "/", id: "tab1" },
{ path: "/tab2/", id: "tab2" },
{ path: "/tab3/", id: "tab3" },
]
}
}
}
```
Please see [examples/routable-tabs](./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](https://zeit.co/now) or [netlify](https://www.netlify.com) or [surge](https://surge.sh)
**How to make sidepanel working?**
The `default` layout can do the trick. See [kitchen-sink/layouts/default.vue](examples/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
```bash
# Fork and clone [email protected]:nuxt-community/nuxt7.git
# Install dependencies
yarn install
# Start development server (kitchen sink)
yarn dev
```
## License
MIT - Nuxt Community - Pooya Parsa