Framework7 Vue Webpack starter app template with hot-reload & css extraction
Switch branches/tags
Nothing to show
Clone or download
nolimits4web Rework to Webpack 4
Fixes #64
Fixes #57
Fixes #49
Fixes #46
Latest commit f89930a Oct 5, 2018
Failed to load latest commit information.
build Rework to Webpack 4 Oct 5, 2018
src Rework to Webpack 4 Oct 5, 2018
static Initial commit Dec 20, 2016
.editorconfig v2 Jan 29, 2018
.gitignore v2 Jan 29, 2018
LICENSE Initial commit Dec 20, 2016 Rework to Webpack 4 Oct 5, 2018
babel.config.js Rework to Webpack 4 Oct 5, 2018
package-lock.json Rework to Webpack 4 Oct 5, 2018
package.json Rework to Webpack 4 Oct 5, 2018

Framework7 Vue + Webpack App Template

A full-featured Framework7 Vue with Webpack setup with hot-reload & css extraction. Based on Vue Webpack Boilerplate


1. Download this repository

git clone my-app

Repository will be downloaded into my-app/ folder

2. Instal dependencies

Go to the downloaded repository folder and run:

npm install

This will download latest version of Framework7, Framework7-Vue, Vue and required icon fonts (to /src/fonts/)

3. Run the app

npm run dev

App will be opened in browser at http://localhost:8080/

4. Build app for production

npm run build

The output will be at www/ folder

Use with cordova

Cordova is not enabled by default, so make sure to remove the comment tags around the <script src="cordova.js"></script> line in [projectroot]/src/index.html

  <div id="app"></div>

  <!-- Cordova -->

  <script src="cordova.js"></script>

  <!-- built script files will be auto injected -->

It will be added during the build process to Android/iOS.

Just put the contents of www folder in your cordova's project root www folder

One command install

git clone my-app &&
cd my-app &&
npm install &&
npm run dev

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for development
npm run build-dev

# build for production with minification
npm run build-prod

Project Structure

  • src/index.html - main app HTML
  • 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/app.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
  • /static/ - folder with extra static assets that will be copied into output folder