caiobiodere/cordova-template-framework7-vue-webpack

Framework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement

cordova-template-framework7-vue-webpack's Issues

missing file cordova.js

when I run cordova run browser -- --lr OR cordova run ios -- --lr
I find some error below. How can I fix it.
http://localhost:8081/platform_cordova_files/browser/cordova.js 404 not found
http://localhost:8081/platform_cordova_files/ios/cordova.js 404 not found

"Invalid Host header": --host 0.0.0.0 not working with public ip, due to webpack-dev-server v2.4.3 security fix

Hi guys,

I'm still use the 1.0.9 version template, after reinstall my pc and checkout my projects. I ran into an error on my test phone, Invalid Host header with a white background.

As per webpack/webpack-dev-server#882 (comment), and https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3,

• Requests are not blocked when Host doesn't match listening host or public option.
• Requests to localhost or 127.0.0.1 are not blocked.

the config in webpack.config.js (https://github.com/centrual/cordova-template-framework7-vue-webpack/blob/master/template_src/webpack.config.js#L105)

host: "0.0.0.0",

My due date is today, so I just add disableHostCheck: true under that line to continue the work.

Hope you'll find a better way to fix this. : )

How to make this template compatible to both platform?

Hi,
I'm looking forward for this template do support for both Android and iOS platform. With this compatibility, I can develop much powerful app with its dynamically.
Thanks! 😄

Refer: https://framework7.io/tutorials/maintain-both-ios-and-material-themes-in-single-app.html

White screen on android (ios and browser working fine) (Mac OS)

I am running cordova run android and I am getting the error at the bottom.

I have a service (item.js) thats getting a json array as follows:

export default {
    getItems() {
       let items = [
         {
            id: "1",
            title: "item 1"
         },
         {
           id: "2",
           title: "item 2"
         }
       ]
    }
}

Then I have a items.vue file below.

<template>
	<f7-page>
		<f7-navbar title="Principle Member" back-link="Back" sliding></f7-navbar>
		<f7-block-title>Items</f7-block-title>
		<f7-list>
                     <f7-list-item v-for="item in fetchedItems">
                           <f7-label>{{item.label}}</f7-label>
                     </f7-list>
                </f7-list>
        </f7-page>
</template>

<script>
     import fetchedItems from '../services/items'

    data() {
		return {
			fetchedItems: []
		}
    },
    created() {
	this.fetchedItems()
     },
     methods: {
       fetchedItems() {
         return fetchedItems.getItems()
	   .then(results => {
	      this.fetchedItems = results;
           })
       }
     }
</script>

The error generated on android is below.

file:///android_asset/www/19699c910e8139766b4c.main.js: Line 27217 : Uncaught SyntaxError: Unexpected token )
E/Web Console(13580): Uncaught SyntaxError: Unexpected token ):27217
D/CordovaWebViewImpl(13580): onPageFinished(file:///android_asset/www/index.html)

Below is a snippet on 19699c910e8139766b4c.main.js where the error occurs.

/*!****************************************************!*\
  !*** ./src/assets/vue/services/item.js ***!
  \****************************************************/
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony default export */ __webpack_exports__["a"] = {

	getItems() {                   // ** line 27217 **
		let items = [
         {
            id: "1",
            label: "item 1"
         },
         {
           id: "2",
           label: "item 2"
         }
       ]
	    return new Promise(function (resolve, reject) {
			resolve(items)
		})
		.catch(function (error) {
			reject(error);
		})
	} ....

When I run on IOS and browser, it works fine.

How to config webpack "babel-loader" for js file?

Im want using babel-loader ? , i edit webpack config like this, app running but it only whitescreen.
How to config webpack "babel-loader" for js file?

{ test: /\.js?$/, loader: 'babel-loader?presets[]=env&presets[]=stage-0', exclude: /node_modules/, enforce: 'pre' }

how to go to a page by url

hello~
when i try to use this url http://127.0.0.1:8081/#/lecture/room/?id=1 to go to the room.vue page, the app will go to the index page ? why? thank you very much

How to load mp3 file ?

I want to using mp3 in my app .
I using file-loader like this :
{ test: /\.(png|jpe?g|gif|mp3)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } },

and require it in modules vuex :
export const mp3 = { namespaced: true, state: { music: require('../../assets/static/mp3/music.mp3') }, mutations: {} };
But i can't using mp3? 😕 what i'm do wrong? plz help me .

use this.$router.load(...) in main.vue

Hi. I need make a redirect in main.vue, but this.$router is undefined. How can I do that? thx.

when I execute 'cordova platform add ios', something wrong.

when I execute 'cordova platform add ios', some error below:
Error: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

how to fix it
thanks

Dom7 not defined w/ Framework7 1.6.2

A recent upgrade to F7 version 1.6.2 caused a Dom7 not defined error. Confirmed with clean install of current project.

Uncaught ReferenceError: Dom7 is not defined
    at a09b5db….main.js:24342
    at a09b5db….main.js:24447
    at Object.<anonymous> (a09b5db….main.js:28508)
    at Object.<anonymous> (a09b5db….main.js:28512)
    at __webpack_require__ (a09b5db….main.js:20)
    at Object.<anonymous> (a09b5db….main.js:34955)
    at __webpack_require__ (a09b5db….main.js:20)
    at module.exports.rawScriptExports (a09b5db….main.js:66)
    at a09b5db….main.js:69

Rolling back to Framework7 v1.6.0 works, but only as a workaround.
Dom7 becamse a standalone dependency (devDependency (only?)) for F7 at v1.6.2
Does that impact this project?

Clean build off master - Error: Cannot find module 'uglify-js'

Your project looks like fun. I set it up using the command you have in the instructions.

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

No errors. One warning that I think may be relevant is:

npm WARN [email protected] requires a peer of uglify-js@^2.8.0 but none was installed.

I then ran npm install

All good.

When I run webpack I get

Error: Cannot find module 'uglify-js'

So, I installed the Android platform cordova platform add android

All good.

Then I and ran cordova build android
And I get

Error: Cannot find module 'uglify-js'

I checked node_modules\ and I found uglify-es, uglifyjs-webpack-plugin, uglify-to-browserify

Not sure about that uglify-es folder.

In the package.js file in dev it says,

        "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony",
        "uglifyjs-webpack-plugin": "^0.3.0",

When I try to

npm install --save-dev uglify-js@github:mishoo/UglifyJS2#harmony

I now see a uglify-js folder in the node-modules folder, but I still get the same uglify-js not found error.

I'm on Linux and checked my $PATH for conflicting settings. No path specified for node_modules. That's all good, no reference at all.

I haven't installed uglify globally. That would probably solve the issue though it might make reference to the Harmony version difficult, breaking support for ES6 (I'm guessing?).

I'm new to webpack (previous gulp exp.) so maybe I'm using Webpack incorrectly or missing a step?

Running
Node v 7.2.1
Cordova v 6.5.0
NPM v 3.10.10

Any advice appreciated. Thank you in advance.

how to use <keep-alive> in this template

excuse me, how to use in this template?
i want to judge the current page to remove css, but destroyed not working.
Thank you

var HomeIndexStyles = require('!style-loader/useable!css-loader!../../css/home/index.css');
……
mounted: function() {
   this.$nextTick(function() {
    HomeIndexStyles.use();
   }
},
destroyed: function() {
    HomeIndexStyles.unuse();
    console.log('销毁了HomeIndexStyles');
}

src/assets/static/images not copied to phonegap platforms

Hi, I've added a favicon.png file to the src/assets/static/images directory in my project, but

phonegap build browser

doesn't copy it to anywhere.

Is there something in a config file that needs turning on?

Where to place / How to reference SVGs for Phonegap use

I am running into issues using SVGs, during development I had placed svg files in www/assets/subdirs/files.svg - this was working fine.

When I then did a phonegap run android, I found that one of the hooks wiped out everything in www/

I then tried to place the svgs in:
src/assets/static/images/svg/subdirs/files.svg
and
src/static/images/svg/subdirs/files.svg

Neither seem to give me any joy, any hints?

type check failed for prop "infiniteScrollDistance"

Defining scroll distance console throwing error.

<f7-page name="feeds" infinite-scroll @infinite="onInfiniteScroll" infinite-scroll-distance="100">

[Vue warn]: Invalid prop: type check failed for prop "infiniteScrollDistance". Expected Number, got String.
(found in )

However in compiled version I can see data-distance attribute added to page-content

How to load images from src/assets/static/images ?

I stored the images on src/assets/static/images as on template. But how to load it to app? Since there is no images on www folder.

Including cordova plugin js file (Linux OS)

I'm using this cordova plugin https://github.com/jeduan/cordova-plugin-facebook4, but during a cordova run browser -- --live-reload its js file get ignored.
Everything works if I run cordova run browser.

How can I tell cordova to include some other plugins using your template?

cordova emulate android doesn't work

Error: Error happened when webpack build: Error: stdout maxBuffer exceeded

White screen when created build version for Cordova

I used xCode to compiled the iOS app. When app installed and started, it's showing white screen. I have external js files placed in assets/js/. Those files are not moving to /www folder

Android: Failed to load resource: net::ERR_CONNECTION_REFUSED

Hi,

I have some problems with the "livereload" function under android.
First I´ve created a new project, added platforms and tried to run it:

1: cordova run browser -- --lr ----> Everyhing works fine, got directed to 127.0.0.1:8081

2: cordova run android -- --lr ---> I got a connection error.

Will i have to do some additional configurations (webpack.config.js) ????

Thx in advance ....

how to compress the html code in vue file?

hello, how to compress the html code in vue file? should i change the configure of webpack.config.js?thank you~

Pleace help me using babel-loader . [Fixed]

I try , but could you add babel loader to your template ? 👍
Because i want using spread syntax , plz help me.

statusbar-overlay not working in IOS

statusbar-overlay should be inserted in body context, but it is not possible in this model (body > div id="app" > body). How should we does?

Vue warn “style” is a reserved attribute

while testing vuejs + webpack starter template, in console I am seeing this error vue.common.js:431 [Vue warn]: “style” is a reserved attribute

and cannot be used as component prop.

HOW TO: Import custom JavaScript file/library?

Could you please help me on how to and where to import custom JavaScript file and/or library or from a CDN?
Because usually I just inject it at the bottom part of the <body>, but it seems that this has a different method. Thank you so much.

Error when project path have space in folder name

Small error when sudo cordova run android with space in project path.
I'm on linux.
Exemple with /home/name/Documents/test cordova/project/ :

sudo cordova run android
Before deploy hook started...
Checking is node modules installed...
Node modules already installed.
Starting webpack build...
Error happened when webpack build: Error: Command failed: /home/name/Documents/test cordova/project/node_modules/.bin/webpack
/bin/sh: 1: /home/name/Documents/test: not found

f7 router events

Hi. I have to make redirect when authorized user going to the login page. How can I use f7 router events?

Feature request: Vuex

Any interest in adding Vuex as well? I've used your project here twice and I like it. I look forward to using it more.

I find that adding Vuex is almost always my next step and even when it's not, it's only because I'm rolling my own for very small testing projects. In those cases, I would be just as happy to have Vuex already installed.

This is just a suggestion. You might have other plans or use cases to meet and if so, no worries at all.

I hate having to post this as an issue. Is there a better way to have this conversation? I'm relatively new to Github still.

Thank you for your efforts on this project already. Greatly appreciated.

Material Theme?

Can I use the material theme? I imagine it would require some components to be material specific as there dom is different. Or perhaps the components can make use of v-if="$theme.ios" and v-if="$theme.material".

I

Create cordova project from folder

Hi,
I created a cordova app with your template with cordova cli and after that I commit in my git repo.
In a second PC I download sources with git's checkout, but when I try to execute any cordova cli command I've the following error:

Error: Current working directory is not a Cordova-based project.

To make it works I had to create a new cordova project ad after that I had to copy all files from my checkout to it, replacing all files (hooks, www, config.xml, ...)

There is another solution to "create" cordova app from your project folder?

Vuex getter error during evaluation

i have added vuex and getting value of state as "error during evaluation"

here is my code

`<script>
import { mapGetters } from 'vuex';

export default{
	  computed:{
           
            ...mapGetters({
                repositoryList:'getRepositoryList'
            })
        },

      
   data(){
            return {
                list:[]
            }
        },
}

</script>`

Vuex for better State-Management and Vue-DevTools

Having some problems with the points in the Header.

Vue-DevTools:
while debugging in chrome, vue-devtools plugin will not detect that i'm working on a vue-project.

Vuex:
After installing "vuex" and "babel-preset-stage-2" i got following error message after import e.g. { mapActions }

ERROR in ./~/vue-loader/lib/selector.js?type=script&index=0!./src/assets/vue/pages/components/add.vue
Module parse failed: C:\phonegap\mytime\node_modules\vue-loader\lib\selector.js?type=script&index=0!C:\phonegap\mytime\src\assets\vue\pages\components\add.vue Unexpected token (34:8)
You may need an appropriate loader to handle this file type.
|
| methods: {
| ...mapActions([ <-- Line 34
| 'addAccount'
| ]),
@ ./src/assets/vue/pages/components/add.vue 3:2-97
@ ./src/routes.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8081 webpack/hot/dev-server ./src/main.js ./webpack/dev_helpers/CordovaDeviceRouter.js

Any suggestions?

Many thanks in advance,

Strict mode

After success install current template, when I run

cordova run browser -- --live-reload

it fails, with

cordova run browser -- --live-reload
Error: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

Modules not found

Hi,
I have just followed initial instructions (create project from template, adding platforms, etc.) when webpack compilation fails (looks like it cannot find modules).

I get several errors like this one:

ERROR in ./src/app.js
Module not found: Error: Can't resolve 'framework7' in .../Test/src'
@ ./src/app.js 5:0-19
@ multi (webpack)-dev-server/client?http://192.168.1.38:8081 webpack/hot/dev-server ./src/app.js ./webpack/dev_helpers/CordovaDeviceRouter.js

It not only fails with framework7, but also with vue.

My cordova version is 7.0.1. npm version 5.0.3.
MacOS Sierra.

Commands I followed:

cordova create Test com.me.test Test --template cordova-template-framework7-vue-webpack
cordova platform add browser
cordova run browser -- --live-reload

What am I doing wrong?
Thanks!

White screen (Linux OS)

Sorry If I skipped any step but, running cordova run browser -- --live-reload show the right title, but the page is completely white. Is it right?

Great project, thanks.

Device ready in browser mode? (Linux OS)

I'm wondering if there is any way to listen for the deviceready call in this setup from running it in the browser or building it?

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/

I can't seem to catch that event. Any experience with this?

This is more of a Cordova issue. I'll close it.

Need help: white screen on adobe phonegap build

Background:

Hi,

I purchased the apple developer program, and don't have a Mac. I need to build an app for both android and iphone.

I work in my own docker image with docker-compose (config), and test the code on an android with usb plugged.

The live-reload works. It shows blank screen sometimes, but it's not annoying. One can simply press return on the phone, the page will reload again.

The build command also works, install the right .apk (~28 MB)

export NODE_ENV=development
phonegap analytics off
phonegap run android -d --device

Issue:

However, when I use the adobe phonegap build to build the app, it build a much smaller .apk (~3.4 MB), and shows a white screen.

test project generated with phonegap run android:

├── AndroidManifest.xml
├── assets
│   └── www
│       ├── c28e4029ac8795ebc20a.main.js
│       ├── cordova.js
│       ├── cordova-js-src
│       ├── cordova_plugins.js
│       ├── i-f7-ios.png
│       ├── index.html
│       └── styles.css
├── classes.dex
├── META-INF
│   ├── CERT.RSA
│   ├── CERT.SF
│   └── MANIFEST.MF
├── res
...
│   └── xml
│       └── config.xml
└── resources.arsc

test project generated in phonegap service:

├── AndroidManifest.xml
├── assets
│   └── www
│       ├── assets
│       ├── cordova.js
│       ├── cordova_plugins.js
│       ├── hooks
│       ├── index.html
│       ├── main.js
│       ├── main.vue
│       ├── package.json
│       ├── phonegap.js
│       ├── routes.js
│       ├── webpack
│       ├── webpack.config.js
│       └── www
├── classes.dex
├── META-INF
│   ├── CERT.RSA
│   ├── CERT.SF
│   └── MANIFEST.MF
├── res
...
│   └── xml
│       └── config.xml
└── resources.arsc

Questions:

1. Does it mean that the phonegap build service ignore the hooks?
2. I don't have a Mac right now. So I can only build the app on
   • Linux - How?
   • Windows - How?
   • Build services - Any suggestions?

Any other suggestions please?

What I've tried

1. folder structure

I thought the issue may be the folder structure. So I make a test project

my project:

├── app
│   ├── config.xml
│   ├── Dockerfile
│   ├── hooks
│   ├── node_modules
│   ├── package.json
│   ├── platforms
│   ├── plugins
│   ├── src
│   ├── webpack
│   ├── webpack.config.js
│   └── www
├── docker-compose.yml
├── gradle
│   └── wrapper
├── gradlew
├── gradlew.bat
└── README.org

test project:

├── config.xml
├── hooks
├── node_modules
├── package.json
├── platforms
├── plugins
├── src
├── webpack
├── webpack.config.js
└── www

the test project resulted an .apk with white screen, and smaller size (141 KB vs 2.1 MB) too.

build --release is failing in webpack

cordova build android

is successfuly building in platforms/android/build/outputs/apk/android-debug.apk

But when I want to build a release with

cordova build android --release

webpack build is failing with :

Before deploy hook started...
Checking is node modules installed...
Node modules already installed.
Starting webpack build...
Error happened when webpack build: Error: Command failed: /home/emak/code/portrait/node_modules/.bin/webpack --env.release
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
clean-webpack-plugin: /home/emak/code/portrait/www has been removed.
(node:16644) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/is
sues/56                                                                                                                                                       parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

Webpack build completed to www folder successfully!
Error happened on main chain:
Error: Error happened when webpack build: Error: Command failed: /home/emak/code/portrait/node_modules/.bin/webpack --env.release
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
clean-webpack-plugin: /home/emak/code/portrait/www has been removed.
(node:16644) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/is
sues/56                                                                                                                                                       parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

    at exec (/home/emak/code/portrait/hooks/hookers.js:171:19)
    at ChildProcess.exithandler (child_process.js:218:5)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:885:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
Error: Error happened when webpack build: Error: Command failed: /home/emak/code/portrait/node_modules/.bin/webpack --env.release
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
clean-webpack-plugin: /home/emak/code/portrait/www has been removed.
(node:16644) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/is
sues/56                                                                                                                                                       parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

I tried to change webpack.config.js:L77-78 according to this messages without success.

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"

where to add new methods?

How to start?

How to run or build ???

Any special Build instructions (once completed)?

Just curious if this template requires any special build instructions for deployment? To clarify, this build will work for all Phonegap/Cordova supported platforms correct? Just asking in advance because I've not built a PhoneGap/Cordova app with this many different frameworks or with Node involved. On a deadline, so I'm trying to make this transition as seamless as possible. Thanks in advance!

Slack invite

Hey Oğuz! I want to add you to F7 developers and contributors Slack channel! Could you email me at [email protected] and I will send you invite

Why place `sass` under `assets`?

Shouldn't it be under src/sass?

Add Cordova Browser-Sync Plugin ?

https://github.com/nparashuram/cordova-plugin-browsersync

Will you add this plugin ??

iOS: Live reload seems broken (Mac OS)

Hi @centrual

Somehow the live reload functionality seems broken for me, when I run:
$ cordova run ios -- --live-reload from my project folder

It's a completely clean project.

I get the following from the iOS simulator:

I'm running Cordova 6.4.0 and Node 7.2.1.

I'm not sure whether the template is misconfigured, or the cordova browsersync plugin is broken:

• http://stackoverflow.com/questions/35975086/why-is-the-cordova-browser-sync-plugin-not-working-on-a-clean-new-apache-cordov

Do the live reload feature work on your machine?

Watching the $route changes to fetch data

Somehow i am not able to watch $route. I have two components: One for the view and one to add new items.

Routes:

{
    path: '/addTodo/addTodo',
    component: require('./assets/todos/pages/todos/addTodo.vue')
  },
  {
    path: '/todos/',
    component: require('./assets/todos/pages/viewTodos.vue')
  }

From viewTodos.vue i switch to addTodo.vue but then after $route.back() my view does not update.
I use:

watch: {
  '$route': 'doSomething'
},

Here are the $route values for each component:

viewTodo.vue
Url: /todos/
Path: /todos/
Route: {
"path": "/todos/",
"component": {
"watch": {
"$route": "loadTodos"
},
"methods": {},
"computed": {},
"staticRenderFns": [],
"__file": "C:\Users\SgtPepper\phonegap\mytime\src\assets\todos\pages\viewTodos.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
],
"_Ctor": {}
},
"pagePath": "/todos/"
}

addTodo.vue
Url: /todos/addTodo/
Path: /todos/addTodo
Route: {
"path": "/todos/addTodo/",
"component": {
"methods": {},
"staticRenderFns": [],
"_scopeId": "data-v-6bd83e6e",
"__file": "C:\Users\SgtPepper\phonegap\mytime\src\assets\todos\pages\todos\addTodo\addTodo.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
],
"_Ctor": {}
},
"pagePath": "/todos/addTodo/"
}

How to import SASS with root path?

I'm trying to import a SASS partial, like so:

<style scoped lang="sass">
@import 'assets/sass/colors.scss';
</style>

It doesn't resolve though.

Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

Hi, i have this issue after to try to add some platform:

PS D:***> cordova platform add android
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: ************
Name: *********
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with [email protected]
Error: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

The platform is added, but, if i try "cordova run android" i have the same issue:

PS D:****> cordova run android
Error: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

Some idea? tnk!

HMR issue on main.vue

Hi,

Thank you for your work.
It seems there is an issue with HMR on the first page.
When I try to modify the script tag inside main.vue, It reloads the entire page and I get a white screen, without any errors in the console, do you know why?
I was thinking it was due to modifications on my side but after I started with a new clone of the repo I have the same issue.

Thanks.

iOS simulator with live reload disconnect

I am running cordova emulate ios -- --lr, Simulator loads fine but any changes in the code it disconnect from Simulator with error [WDS] Disconnected!

I am playing with Cordova plugin and right now it's difficult to re-run the command to test every line of code.

is there any fix for that?