Starter App Templates

There are three ready to use templates to start your app developement using Framework7 and Vue.

Framework7 Vue Simple Template

This is the most simple static template without any builder and development server. It provides setup in a single HTML file

This template is targeted at beginners who want to start exploring Framework7 + Vue without the distraction of a complicated development environment.

For advanced features such as asset compilation, hot-reload and CSS extraction, we recommend that more experienced developers use one of the other templates: Framework7 Vue Webpack Template or Framework7 Vue Browserify Template.

Download template from its GitHub repository or

$ git clone https://github.com/nolimits4web/Framework7-Vue-Simple-Template my-app

Framework7 Vue Webpack App Template

This is the most powerful template which includes full-featured Framework7 + Vue + Webpack setup with hot-reload, single file components (.vue) support & css extraction.

Install

Download template from its GitHub repository or

$ git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template my-app

Go to the downloaded project folder and install dependencies:

$ npm install

Run development environment

$ npm run dev

App will run server with hot reload at localhost:8080

Build for production

When your app is ready you need to build it for production:

$ npm run build

Project Structure

• src/assets - folder with static assets (images)
• src/components - folder with custom .vue components
• src/css - put custom app CSS styles here. Don't forget to import them in main.js
• src/pages - app .vue pages
• src/main.js - main app file where you include/import all required libs and init app
• src/routes.js - app routes
• src/app.vue - main app structure/component

Framework7 Vue Browserify App Template

Another powerful template which includes Framework7 + Vue + Browserify setup with hot-reload, single file components (.vue) support & css extraction.

Install

Download template from its GitHub repository or

$ git clone https://github.com/nolimits4web/Framework7-Vue-Browserify-Template my-app

Go to the downloaded project folder and install dependencies:

$ npm install

Run development environment

$ npm run dev

App will run server with hot reload at localhost:8080

Build for production

When your app is ready you need to build it for production:

$ npm run build

Project Structure

• src/components - folder with custom .vue components
• src/pages - app .vue pages
• src/main.js - main app file where you include/import all required libs and init app
• src/routes.js - app routes
• src/app.vue - main app structure/component
• dist/css - app styles, put custom app CSS styles here as well
• dist/css/build.css - Vue components styles will be extracted here on npm run build

Framework7 Vue Webpack Cordova App Template

This template includes full-featured Framework7 + Vue + Webpack setup with hot-reload, single file components (.vue) support & css extraction with super cordova support.

Install

You can read instructions from its GitHub repository you can continue reading.

This template needs Node Js and Npm. You can find install instructions from Node Js home page.

If you don't have cordova or phonegap please install it with:

$ npm i cordova -g
or
$ npm i phonegap -g

Now you have NodeJs and Cordova-PhoneGap You can create a project with this template now:

$ cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack
or
$ phonegap create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack

Run Your Code

You can run every cordova-phonegap commands. You have one argument for development: -- --live-reload or -- --lr.

You can find cordova cli reference from Cordova Docs or phonegap cli reference from: Phonegap Docs

Sample Commands:

$ cordova (run|emulate) [android|ios|browser] [-- --lr]
or
$ phonegap (run|emulate) [android|ios|browser] [-- --lr]

Build for production

When your app is ready you need to build it for production:

$ cordova build --release
or
$ phonegap build --release

For more information about build: Cordova Android Platform Guide

Project Structure

• src - Source files are here. Mostly your target is this directory.
• src/assets/static - Your static assets like images, css, fonts, json, js, sass is here.
• src/assets/static/css - put custom app CSS styles here. Don't forget to import them in main.js
• src/assets/vue/pages - app .vue pages
• src/assets/vue/components - folder with custom .vue components
• src/main.js - main app file where you include/import all required libs and init app
• src/routes.js - app routes
• src/main.vue - main app structure/component

App Framework

iOS and Android Apps with HTML & JavaScript - develop, build and deploy - free and open source!

With App Framework, you could spend your time for your next amazing App and not for the tricky stuff around!

Features

Setup your project:

• Creation of a lightweight and well-organized project folder, ready to publish on GitHub

Design your application:

• Printable template to design your application with paper and pencil
• Templates for your icon design - as PDF for sketching and PPTX for drawing

Develop your application:

• Realize beautiful user interfaces with all well-known components and transitions, based on Framework7
• Easy to maintain single file components with reusable UI elements, based on Vue.js
• One code base for all devices with HTML, CSS and JavaScript - realized with Cordova, supporting ES2015
• Comprehensive icon fonts like FontAwesome, Framework7, Ion and Material Icons out of the box
• Well prepared to use Firebase authentication, realtime database and storage services
• State kept for history, tabs, scroll positions, focus, panels, modals, form inputs and page component data
• Global data object to use the same data and setting across your whole application
• Flexible routing with dynamic, nesting and login protection
• Offline capability and multi-language support out of the box

Test your application:

• Integrated code check for correctness and automatic fix for standard conformity
• Local development server with live reload, perfectly to use together with Chrome DevTools
• Test your application on any iOS or Android device with an emulator or on your own device
• Use a development Firebase project with automatic database and storage rule update

Build your application:

• Build process with version bump and compression of all HTML, CSS, JavaScript and image files
• Generation of favicons, touch icons and splash screens out of a single image file
• Phone frame around your application on big screens, so you can offer desktop access with charm
• Automatic build as web application, to be used online and offline in the browser
• Automatic Apple Xcode project build with Cordova
• Automatic Android Studio project build with Cordova

Deploy your application:

• Deployment without downtime
  • to any FTP server as Web App
  • to the Firebase Hosting service as Web App
  • to the Apple App Store as native iOS App
  • to the Google Play Store as native Android App
• Easy rollback solutions

Backup your project:

• Download the Firebase database content and user list to local JSON files
• Snapshot creation of all important project files to backup on any external drive or cloud service

Demo App

       

Get started