https://github.com/phonegap/phonegap-template-vue-f7-split-panel

A Split View PhoneGap template using Vue.js and Framework7 that degrades to a Panel View on smaller devices
https://github.com/phonegap/phonegap-template-vue-f7-split-panel

cordova framework7 framework7-vue phonegap phonegap-templates vue vuejs2 webpack

Last synced: about 1 month ago
JSON representation

A Split View PhoneGap template using Vue.js and Framework7 that degrades to a Panel View on smaller devices

• Host: GitHub
• URL: https://github.com/phonegap/phonegap-template-vue-f7-split-panel
• Owner: phonegap
• License: apache-2.0
• Created: 2017-03-14T02:33:09.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-09-18T13:03:08.000Z (about 3 years ago)
• Last Synced: 2024-09-27T19:04:03.010Z (about 2 months ago)
• Topics: cordova, framework7, framework7-vue, phonegap, phonegap-templates, vue, vuejs2, webpack
• Language: JavaScript
• Size: 11.4 MB
• Stars: 17
• Watchers: 17
• Forks: 10
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A Split View / Panel PhoneGap template using Vue.js and Framework7

Vue.js, Framework7, and Cordova / PhoneGap Template with Babel, Webpack and Hot Reloading

![example image iOS](https://github.com/phonegap/phonegap-template-vue-f7-split-panel/raw/master/example-split-iOS.png)

![example image android](https://github.com/phonegap/phonegap-template-vue-f7-split-panel/raw/master/example-split-android.png)

## Getting Started

### Prerequisites

To use this template, you'll need Node.js v6 or newer.

### Installation

To use this as a template, use Cordova 6.0.0+ and create a new project:

```

cordova create MyAppName --template=phonegap-template-vue-f7-split-panel

```

or

```

phonegap create MyAppName --template phonegap-template-vue-f7-split-panel

```

then

```

cd MyAppName

npm install

```

### Run the app in the browser / simulator

Run this to start the development webpack server:

```

npm run dev

```

You can then open the app in your browser by visiting [localhost:8080](http://localhost:8080)

Open it in the iOS Simulator by running (in another terminal):

`cordova platform add ios` or `phonegap platform add ios`

then

```

npm run cordova-run-ios

```

Or in the Android emulator with:

`cordova platform add android` or `phonegap platform add android`

then

```

npm run cordova-run-android

```

(both of which are just calling `cordova run ios` and `cordova run android`)

### Build the app for production

To build the app without the development hot module reloading server:

```

npm run build-prod

```

After that, the normal Cordova / PhoneGap commands can be used such as `phonegap serve`, or `cordova run ios`, etc.