├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── src
    ├── app.vue
    ├── main.js
    ├── pages
    │   ├── about.vue
    │   ├── dynamic-route.vue
    │   ├── form.vue
    │   ├── home.vue
    │   ├── not-found.vue
    │   ├── panel-left.vue
    │   └── panel-right.vue
    └── routes.js
└── www
    ├── .gitkeep
    ├── css
        ├── app.css
        └── icons.css
    ├── index.html
    └── js
        └── .keep


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015"],
4 |     "stage-2"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | .root = true
2 | 
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "standard",
 3 |   "plugins": [
 4 |     "html"
 5 |   ],
 6 |   "env": {
 7 |     "jasmine": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | www/js/build.js
4 | www/fonts
5 | www/css/build.css
6 | www/css/framework7.css
7 | www/css/framework7.min.css
8 | 
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Vladimir Kharlampidi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ⛔️ DEPRECATED
 2 | 
 3 | <em>**This repo is deprecated and not mainted any more. Use [Framework7-CLI](https://framework7.io/cli/) instead. Please, don't open new issues and don't send any PRs to this repository**</em>
 4 | 
 5 | # Framework7 Vue Browserify Template
 6 | Framework7 Vue with Browserify starter app template with hot-reload &amp; css extraction. Based on [Vue Browserify Boilerplate](https://github.com/vuejs-templates/browserify)
 7 | 
 8 | ## Usage
 9 | 
10 | ### 1. Download this repository
11 | ```
12 | git clone https://github.com/framework7io/framework7-template-vue-browserify my-app
13 | ```
14 | 
15 | Repository will be downloaded into `my-app/` folder
16 | 
17 | ### 2. Instal dependencies
18 | 
19 | Go to the downloaded repository folder and run:
20 | ```
21 | npm install
22 | ```
23 | 
24 | This will download latest version of Framework7, Framework7-Vue, Vue and required icon fonts (to `/www/fonts/`)
25 | 
26 | ### 3. Run the app
27 | 
28 | ```
29 | npm run serve
30 | ```
31 | 
32 | App will be opened in browser at `http://localhost:8080/`
33 | 
34 | ### 4. Build app for production
35 | 
36 | ```
37 | npm run build
38 | ```
39 | 
40 | The output will be at `www/` folder
41 | 
42 | ## Use with cordova
43 | 
44 | Just put the contents of `www` folder in your cordova's project root `www` folder
45 | 
46 | ## One command install
47 | 
48 | ```
49 | git clone https://github.com/framework7io/framework7-template-vue-browserify my-app &&
50 | cd my-app &&
51 | npm install &&
52 | npm run dev
53 | ```
54 | 
55 | ## Build Setup
56 | 
57 | ``` bash
58 | # install dependencies
59 | npm install
60 | 
61 | # serve with hot reload at localhost:8080
62 | npm run dev
63 | 
64 | # build for production with minification
65 | npm run build
66 | ```
67 | 
68 | ## Project Structure
69 | 
70 | * `src/components` - folder with custom `.vue` components
71 | * `src/pages` - app `.vue` pages
72 | * `src/main.js` - main app file where you include/import all required libs and init app
73 | * `src/routes.js` - app routes
74 | * `src/app.vue` - main app structure/component
75 | * `www/css` - app styles, put custom app CSS styles here as well
76 | * `www/css/build.css` - Vue components styles will be extracted here on `npm run build`
77 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "framework7-template-vue-browserify",
 3 |   "version": "2.0.0",
 4 |   "description": "Framework7 Vue with Browserify starter app template with hot-reload & css extraction",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/framework7io/framework7-template-vue-browserify.git"
 8 |   },
 9 |   "keywords": [
10 |     "ios",
11 |     "browserify",
12 |     "framework7",
13 |     "f7",
14 |     "vue",
15 |     "vuejs",
16 |     "material",
17 |     "mobile",
18 |     "app"
19 |   ],
20 |   "author": "Vladimir Kharlampidi",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/framework7io/framework7-template-vue-browserify/issues"
24 |   },
25 |   "homepage": "http://framework7.io/vue/",
26 |   "scripts": {
27 |     "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o www/js/build.js",
28 |     "serve": "http-server ./www/ -o -c 1 -a localhost",
29 |     "dev": "npm-run-all --parallel watchify serve",
30 |     "build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o www/css/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > www/js/build.js",
31 |     "copy-f7": "cpy node_modules/framework7/dist/css/framework7.css www/css && cpy node_modules/framework7/dist/css/framework7.min.css www/css && cpy node_modules/framework7-icons/fonts/*.* www/fonts && cpy node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2} www/fonts",
32 |     "postinstall": "npm run copy-f7"
33 |   },
34 |   "browser": {
35 |     "vue": "vue/dist/vue.common.js"
36 |   },
37 |   "browserify": {
38 |     "transform": [
39 |       [
40 |         "babelify",
41 |         {
42 |           "presets": [
43 |             "es2015"
44 |           ]
45 |         }
46 |       ],
47 |       "vueify"
48 |     ]
49 |   },
50 |   "dependencies": {
51 |     "framework7": "^2.2.5",
52 |     "framework7-icons": "^0.8.9",
53 |     "framework7-vue": "^2.2.5",
54 |     "material-design-icons": "^3.0.1",
55 |     "vue": "^2.5.2"
56 |   },
57 |   "devDependencies": {
58 |     "babel-core": "^6.22.1",
59 |     "babel-plugin-transform-runtime": "^6.22.0",
60 |     "babel-preset-es2015": "^6.24.1",
61 |     "babel-preset-stage-2": "^6.22.0",
62 |     "babel-runtime": "^6.0.0",
63 |     "babelify": "^8.0.0",
64 |     "browserify": "^15.2.0",
65 |     "browserify-hmr": "^0.3.6",
66 |     "cpy-cli": "^1.0.1",
67 |     "cross-env": "^2.0.0",
68 |     "envify": "^4.1.0",
69 |     "http-server": "^0.11.1",
70 |     "npm-run-all": "^2.3.0",
71 |     "proxyquireify": "^3.0.1",
72 |     "uglify-js": "^2.5.0",
73 |     "vueify": "^9.4.1",
74 |     "watchify": "^3.10.0"
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- App -->
 3 |   <div id="app">
 4 | 
 5 |     <!-- Statusbar -->
 6 |     <f7-statusbar></f7-statusbar>
 7 | 
 8 |     <!-- Left Panel -->
 9 |     <f7-panel left reveal theme-dark>
10 |       <f7-view url="/panel-left/"></f7-view>
11 |     </f7-panel>
12 | 
13 |     <!-- Right Panel -->
14 |     <f7-panel right cover theme-dark>
15 |       <f7-view url="/panel-right/"></f7-view>
16 |     </f7-panel>
17 | 
18 |     <!-- Main View -->
19 |     <f7-view id="main-view" url="/" main></f7-view>
20 | 
21 |     <!-- Popup -->
22 |     <f7-popup id="popup">
23 |       <f7-view>
24 |         <f7-page>
25 |           <f7-navbar title="Popup">
26 |             <f7-nav-right>
27 |               <f7-link popup-close>Close</f7-link>
28 |             </f7-nav-right>
29 |           </f7-navbar>
30 |           <f7-block>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod.</f7-block>
31 |         </f7-page>
32 |       </f7-view>
33 |     </f7-popup>
34 | 
35 |     <!-- Login Screen -->
36 |     <f7-login-screen id="login-screen">
37 |       <f7-view>
38 |         <f7-page login-screen>
39 |           <f7-login-screen-title>Login</f7-login-screen-title>
40 |           <f7-list form>
41 |             <f7-list-item>
42 |               <f7-label>Username</f7-label>
43 |               <f7-input name="username" placeholder="Username" type="text"></f7-input>
44 |             </f7-list-item>
45 |             <f7-list-item>
46 |               <f7-label>Password</f7-label>
47 |               <f7-input name="password" type="password" placeholder="Password"></f7-input>
48 |             </f7-list-item>
49 |           </f7-list>
50 |           <f7-list>
51 |             <f7-list-button title="Sign In" login-screen-close></f7-list-button>
52 |             <f7-block-footer>
53 |               <p>Click Sign In to close Login Screen</p>
54 |             </f7-block-footer>
55 |           </f7-list>
56 |         </f7-page>
57 |       </f7-view>
58 |     </f7-login-screen>
59 | 
60 |   </div>
61 | </template>
62 | 
63 | <script>
64 | export default {}
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // Import Vue
 2 | import Vue from 'vue';
 3 | 
 4 | // Import F7
 5 | import Framework7 from 'framework7/dist/js/framework7.js';
 6 | 
 7 | // Import F7 Vue Plugin
 8 | import Framework7Vue from 'framework7-vue/dist/framework7-vue.js';
 9 | 
10 | // Import Routes
11 | import Routes from './routes.js';
12 | 
13 | // Import App Component
14 | import App from './app.vue';
15 | 
16 | // Init F7 Vue Plugin
17 | Vue.use(Framework7Vue, Framework7);
18 | 
19 | // Init App
20 | new Vue({
21 |   el: '#app',
22 |   template: '<app/>',
23 |   // Init Framework7 by passing parameters here
24 |   framework7: {
25 |     id: 'io.framework7.testapp', // App bundle ID
26 |     name: 'Framework7', // App name
27 |     theme: 'auto', // Automatic theme detection
28 |     // App routes
29 |     routes: Routes,
30 |   },
31 |   // Register App Component
32 |   components: {
33 |     app: App
34 |   }
35 | });
36 | 


--------------------------------------------------------------------------------
/src/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <f7-page>
 3 |     <f7-navbar title="About" back-link="Back"></f7-navbar>
 4 |     <f7-block-title>About My App</f7-block-title>
 5 |     <f7-block strong>
 6 |       <p>Here is About page!</p>
 7 |       <p>You can go <f7-link back>back</f7-link>.</p>
 8 |       <p>Mauris posuere sit amet metus id venenatis. Ut ante dolor, tempor nec commodo rutrum, varius at sem. Nullam ac nisi non neque ornare pretium. Nulla mauris mauris, consequat et elementum sit amet, egestas sed orci. In hac habitasse platea dictumst.</p>
 9 |       <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
10 |     </f7-block>
11 |   </f7-page>
12 | </template>
13 | 
14 | <script>
15 | export default {}
16 | </script>


--------------------------------------------------------------------------------
/src/pages/dynamic-route.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <f7-page>
 3 |     <f7-navbar title="Dynamic Route" back-link="Back"></f7-navbar>
 4 |     <f7-block strong>
 5 |       <ul>
 6 |         <li><b>Url:</b> {{$f7route.url}}</li>
 7 |         <li><b>Path:</b> {{$f7route.path}}</li>
 8 |         <li><b>Hash:</b> {{$f7route.hash}}</li>
 9 |         <li><b>Params:</b>
10 |           <ul>
11 |             <li v-for="(value, key) in $f7route.params" :key="key"><b>{{key}}:</b> {{value}}</li>
12 |           </ul>
13 |         </li>
14 |         <li><b>Query:</b>
15 |           <ul>
16 |             <li v-for="(value, key) in $f7route.query" :key="key"><b>{{key}}:</b> {{value}}</li>
17 |           </ul>
18 |         </li>
19 |         <li><b>Route:</b> {{$f7route.route}}</li>
20 |       </ul>
21 |     </f7-block>
22 |     <f7-block strong>
23 |       <f7-link @click="$f7router.back()">Go back via Router API</f7-link>
24 |     </f7-block>
25 |   </f7-page>
26 | </template>
27 | 
28 | <script>
29 | export default {}
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/pages/form.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <f7-page>
  3 |     <f7-navbar title="Form" back-link="Back"></f7-navbar>
  4 |     <f7-block-title>Form Example</f7-block-title>
  5 |     <f7-list form>
  6 |       <f7-list-item>
  7 |         <f7-label>Name</f7-label>
  8 |         <f7-input type="text" placeholder="Name"></f7-input>
  9 |       </f7-list-item>
 10 |       <f7-list-item>
 11 |         <f7-label>E-mail</f7-label>
 12 |         <f7-input type="email" placeholder="E-mail"></f7-input>
 13 |       </f7-list-item>
 14 |       <f7-list-item>
 15 |         <f7-label>URL</f7-label>
 16 |         <f7-input type="url" placeholder="URL"></f7-input>
 17 |       </f7-list-item>
 18 |       <f7-list-item>
 19 |         <f7-label>Password</f7-label>
 20 |         <f7-input type="password" placeholder="Password"></f7-input>
 21 |       </f7-list-item>
 22 |       <f7-list-item>
 23 |         <f7-label>Phone</f7-label>
 24 |         <f7-input type="tel" placeholder="Phone"></f7-input>
 25 |       </f7-list-item>
 26 |       <f7-list-item>
 27 |         <f7-label>Gender</f7-label>
 28 |         <f7-input type="select">
 29 |           <option selected>Male</option>
 30 |           <option>Female</option>
 31 |         </f7-input>
 32 |       </f7-list-item>
 33 |       <f7-list-item>
 34 |         <f7-label>Birth date</f7-label>
 35 |         <f7-input type="date" placeholder="Birth date" value="2014-04-30"></f7-input>
 36 |       </f7-list-item>
 37 |       <f7-list-item title="Toggle">
 38 |         <f7-toggle slot="after"></f7-toggle>
 39 |       </f7-list-item>
 40 |       <f7-list-item>
 41 |         <f7-label>Slider</f7-label>
 42 |         <f7-input>
 43 |           <f7-range min="0" max="100" value="50" step="1" :label="true"></f7-range>
 44 |         </f7-input>
 45 |       </f7-list-item>
 46 |       <f7-list-item>
 47 |         <f7-label>Textarea</f7-label>
 48 |         <f7-input type="textarea" placeholder="Bio"></f7-input>
 49 |       </f7-list-item>
 50 |       <f7-list-item>
 51 |         <f7-label>Resizable</f7-label>
 52 |         <f7-input type="textarea" placeholder="Bio" resizable></f7-input>
 53 |       </f7-list-item>
 54 |     </f7-list>
 55 | 
 56 |     <f7-block-title>Checkbox group</f7-block-title>
 57 |     <f7-list form>
 58 |       <f7-list-item v-for="n in 3" :key="n" checkbox name="my-checkbox" :value="n" :title="'Checkbox ' + n"></f7-list-item>
 59 |     </f7-list>
 60 | 
 61 |     <f7-block-title>Radio buttons group</f7-block-title>
 62 |     <f7-list form>
 63 |       <f7-list-item v-for="n in 3" :key="n" radio name="my-radio" :checked="n === 1" :value="n" :title="'Radio ' + n"></f7-list-item>
 64 |     </f7-list>
 65 | 
 66 |     <f7-block-title>Buttons</f7-block-title>
 67 |     <f7-block strong>
 68 |       <f7-row tag="p">
 69 |         <f7-button class="col">Button</f7-button>
 70 |         <f7-button class="col" fill>Fill</f7-button>
 71 |       </f7-row>
 72 |       <f7-row tag="p">
 73 |         <f7-button class="col" raised>Raised</f7-button>
 74 |         <f7-button class="col" raised fill>Raised Fill</f7-button>
 75 |       </f7-row>
 76 |       <f7-row tag="p">
 77 |         <f7-button class="col" round>Round</f7-button>
 78 |         <f7-button class="col" round fill>Round Fill</f7-button>
 79 |       </f7-row>
 80 |       <f7-row tag="p">
 81 |         <f7-button class="col" outline>Outline</f7-button>
 82 |         <f7-button class="col" round outline>Outline Round</f7-button>
 83 |       </f7-row>
 84 |       <f7-row tag="p">
 85 |         <f7-button class="col" small outline>Small</f7-button>
 86 |         <f7-button class="col" small round outline>Small Round</f7-button>
 87 |       </f7-row>
 88 |       <f7-row tag="p">
 89 |         <f7-button class="col" small fill>Small</f7-button>
 90 |         <f7-button class="col" small round fill>Small Round</f7-button>
 91 |       </f7-row>
 92 |       <f7-row tag="p">
 93 |         <f7-button class="col" big raised>Big</f7-button>
 94 |         <f7-button class="col" big fill raised>Big Fill</f7-button>
 95 |       </f7-row>
 96 |       <f7-row tag="p">
 97 |         <f7-button class="col" big fill raised color="red">Big Red</f7-button>
 98 |         <f7-button class="col" big fill raised color="green">Big Green</f7-button>
 99 |       </f7-row>
100 |     </f7-block>
101 |   </f7-page>
102 | </template>
103 | 
104 | <script>
105 | export default {}
106 | </script>
107 | 


--------------------------------------------------------------------------------
/src/pages/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <f7-page>
 3 |     <f7-navbar>
 4 |       <f7-nav-left>
 5 |         <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
 6 |       </f7-nav-left>
 7 |       <f7-nav-title>My App</f7-nav-title>
 8 |       <f7-nav-right>
 9 |         <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
10 |       </f7-nav-right>
11 |     </f7-navbar>
12 |     <f7-toolbar>
13 |       <f7-link>Left Link</f7-link>
14 |       <f7-link>Right Link</f7-link>
15 |     </f7-toolbar>
16 |     <f7-block strong>
17 |       <p>Here is your blank Framework7 app. Let's see what we have here.</p>
18 |     </f7-block>
19 |     <f7-block-title>Navigation</f7-block-title>
20 |     <f7-list>
21 |       <f7-list-item link="/about/" title="About"></f7-list-item>
22 |       <f7-list-item link="/form/" title="Form"></f7-list-item>
23 |     </f7-list>
24 |     <f7-block-title>Modals</f7-block-title>
25 |     <f7-block strong>
26 |       <f7-row>
27 |         <f7-col width="50">
28 |           <f7-button fill raised popup-open="#popup">Popup</f7-button>
29 |         </f7-col>
30 |         <f7-col width="50">
31 |           <f7-button fill raised login-screen-open="#login-screen">Login Screen</f7-button>
32 |         </f7-col>
33 |       </f7-row>
34 |     </f7-block>
35 |     <f7-block-title>Panels</f7-block-title>
36 |     <f7-block strong>
37 |       <f7-row>
38 |         <f7-col width="50">
39 |           <f7-button fill raised panel-open="left">Left Panel</f7-button>
40 |         </f7-col>
41 |         <f7-col width="50">
42 |           <f7-button fill raised panel-open="right">Right Panel</f7-button>
43 |         </f7-col>
44 |       </f7-row>
45 |     </f7-block>
46 |     <f7-list>
47 |       <f7-list-item link="/dynamic-route/blog/45/post/125/?foo=bar#about" title="Dynamic Route"></f7-list-item>
48 |       <f7-list-item link="/load-something-that-doesnt-exist/" title="Default Route (404)"></f7-list-item>
49 |     </f7-list>
50 |   </f7-page>
51 | </template>
52 | <script>
53 | export default {}
54 | </script>
55 | 


--------------------------------------------------------------------------------
/src/pages/not-found.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <f7-page>
 3 |     <f7-navbar title="Not found" back-link="Back"></f7-navbar>
 4 |     <f7-block strong>
 5 |       <p>Sorry</p>
 6 |       <p>Requested content not found.</p>
 7 |     </f7-block>
 8 |   </f7-page>
 9 | </template>
10 | <script>
11 |   export default {};
12 | </script>


--------------------------------------------------------------------------------
/src/pages/panel-left.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <f7-page>
 3 |     <f7-navbar title="Left Panel"></f7-navbar>
 4 |     <f7-block strong>
 5 |       <p>Left panel content goes here</p>
 6 |     </f7-block>
 7 |     <f7-block-title>Load page in panel</f7-block-title>
 8 |     <f7-list>
 9 |       <f7-list-item link="/about/" title="About"></f7-list-item>
10 |       <f7-list-item link="/form/" title="Form"></f7-list-item>
11 |     </f7-list>
12 |     <f7-block-title>Load page in main view</f7-block-title>
13 |     <f7-list>
14 |       <f7-list-item link="/about/" title="About" view="#main-view" panel-close></f7-list-item>
15 |       <f7-list-item link="/form/" title="Form" view="#main-view" panel-close></f7-list-item>
16 |     </f7-list>
17 |   </f7-page>
18 | </template>
19 | <script>
20 | export default {}
21 | </script>


--------------------------------------------------------------------------------
/src/pages/panel-right.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <f7-page>
 3 |     <f7-navbar title="Right Panel" sliding></f7-navbar>
 4 |     <f7-block>
 5 |       <p>Right panel content goes here</p>
 6 |     </f7-block>
 7 |     <f7-block-title>Load page in panel</f7-block-title>
 8 |     <f7-list>
 9 |       <f7-list-item link="/about/" title="About"></f7-list-item>
10 |       <f7-list-item link="/form/" title="Form"></f7-list-item>
11 |     </f7-list>
12 |     <f7-block-title>Load page in main view</f7-block-title>
13 |     <f7-list>
14 |       <f7-list-item link="/about/" title="About" view="#main-view" panel-close></f7-list-item>
15 |       <f7-list-item link="/form/" title="Form" view="#main-view" panel-close></f7-list-item>
16 |     </f7-list>
17 |   </f7-page>
18 | </template>
19 | <script>
20 | export default {}
21 | </script>


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
 1 | import HomePage from './pages/home.vue';
 2 | import AboutPage from './pages/about.vue';
 3 | import FormPage from './pages/form.vue';
 4 | import DynamicRoutePage from './pages/dynamic-route.vue';
 5 | import NotFoundPage from './pages/not-found.vue';
 6 | 
 7 | import PanelLeftPage from './pages/panel-left.vue';
 8 | import PanelRightPage from './pages/panel-right.vue';
 9 | 
10 | export default [
11 |   {
12 |     path: '/',
13 |     component: HomePage,
14 |   },
15 |   {
16 |     path: '/panel-left/',
17 |     component: PanelLeftPage,
18 |   },
19 |   {
20 |     path: '/panel-right/',
21 |     component: PanelRightPage,
22 |   },
23 |   {
24 |     path: '/about/',
25 |     component: AboutPage,
26 |   },
27 |   {
28 |     path: '/form/',
29 |     component: FormPage,
30 |   },
31 |   {
32 |     path: '/dynamic-route/blog/:blogId/post/:postId/',
33 |     component: DynamicRoutePage,
34 |   },
35 |   {
36 |     path: '(.*)',
37 |     component: NotFoundPage,
38 |   },
39 | ];
40 | 


--------------------------------------------------------------------------------
/www/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/framework7io/framework7-template-vue-browserify/325699a0b0f1f6c664caab260f8b768ea95047c2/www/.gitkeep


--------------------------------------------------------------------------------
/www/css/app.css:
--------------------------------------------------------------------------------
1 | /* Your app styles here */
2 | 


--------------------------------------------------------------------------------
/www/css/icons.css:
--------------------------------------------------------------------------------
 1 | /* Material Icons Font (for MD theme) */
 2 | @font-face {
 3 |   font-family: 'Material Icons';
 4 |   font-style: normal;
 5 |   font-weight: 400;
 6 |   src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
 7 |   src: local('Material Icons'),
 8 |        local('MaterialIcons-Regular'),
 9 |        url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
10 |        url(../fonts/MaterialIcons-Regular.woff) format('woff'),
11 |        url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
12 | }
13 | 
14 | .material-icons {
15 |   font-family: 'Material Icons';
16 |   font-weight: normal;
17 |   font-style: normal;
18 |   font-size: 24px;  /* Preferred icon size */
19 |   display: inline-block;
20 |   line-height: 1;
21 |   text-transform: none;
22 |   letter-spacing: normal;
23 |   word-wrap: normal;
24 |   white-space: nowrap;
25 |   direction: ltr;
26 | 
27 |   /* Support for all WebKit browsers. */
28 |   -webkit-font-smoothing: antialiased;
29 |   /* Support for Safari and Chrome. */
30 |   text-rendering: optimizeLegibility;
31 | 
32 |   /* Support for Firefox. */
33 |   -moz-osx-font-smoothing: grayscale;
34 | 
35 |   /* Support for IE. */
36 |   font-feature-settings: 'liga';
37 | }
38 | 
39 | /* Framework7 Icons Font (for iOS theme) */
40 | @font-face {
41 |   font-family: 'Framework7 Icons';
42 |   font-style: normal;
43 |   font-weight: 400;
44 |   src: url("../fonts/Framework7Icons-Regular.eot");
45 |   src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
46 |        url("../fonts/Framework7Icons-Regular.woff") format("woff"),
47 |        url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
48 | }
49 | 
50 | .f7-icons {
51 |   font-family: 'Framework7 Icons';
52 |   font-weight: normal;
53 |   font-style: normal;
54 |   font-size: 25px;
55 |   line-height: 1;
56 |   letter-spacing: normal;
57 |   text-transform: none;
58 |   display: inline-block;
59 |   white-space: nowrap;
60 |   word-wrap: normal;
61 |   direction: ltr;
62 |   -webkit-font-smoothing: antialiased;
63 |   text-rendering: optimizeLegibility;
64 |   -moz-osx-font-smoothing: grayscale;
65 |   -webkit-font-feature-settings: "liga";
66 |   -moz-font-feature-settings: "liga=1";
67 |   -moz-font-feature-settings: "liga";
68 |   font-feature-settings: "liga";
69 |   text-align: center;
70 | }
71 | 


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <!--
 6 |   Customize this policy to fit your own app's needs. For more guidance, see:
 7 |       https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
 8 |   Some notes:
 9 |       * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
10 |       * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
11 |       * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
12 |           * Enable inline JS: add 'unsafe-inline' to default-src
13 |   -->
14 |   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
16 |   <meta name="apple-mobile-web-app-capable" content="yes">
17 |   <meta name="apple-mobile-web-app-status-bar-style" content="default">
18 |   <meta name="theme-color" content="#2196f3">
19 |   <meta name="format-detection" content="telephone=no">
20 |   <meta name="msapplication-tap-highlight" content="no">
21 |   <title>My App</title>
22 |   <link rel="stylesheet" href="css/framework7.min.css">
23 |   <link rel="stylesheet" href="css/icons.css">
24 |   <link rel="stylesheet" href="css/app.css">
25 |   <link rel="stylesheet" href="css/build.css">
26 | </head>
27 | <body>
28 |   <div id="app"></div>
29 |   <!-- Cordova -->
30 |   <!--
31 |   <script src="cordova.js"></script>
32 |   -->
33 |   <script src="js/build.js"></script>
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/www/js/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/framework7io/framework7-template-vue-browserify/325699a0b0f1f6c664caab260f8b768ea95047c2/www/js/.keep


--------------------------------------------------------------------------------