Nuxt.js: Nuxt + Cordova

[allanroger]

Hello,

Since this is my first issue, I feel like I need to thank you guys for this awesome project.
Thanks!

I'm trying to build a multiplatform project, and Nuxt is my chosen one framework. The only problem I've encountered is when wrapping the static generated content in a webview; it kinda works, but it fails to load some files.

Seems to be related with #159, which was closed using serve as a solution, but can't be applied in this case.

Why the serve is needed anyway? This file wasn't supposed to just be static? Or how can I get it working without needing it to be served?

Thanks again.

_{This feature request is available on Nuxt.js community (#c143)}

[alexchopin]

Hi, it seems that Cordova doesn't serve file prefixed by an underscore.
Nuxt.js create an _nuxt directory for all assets, we will probably add a property into nuxt.config.js to set this name in the next release.

[allanroger]

So if I manually rename the folder and all references to it without the underscore, it would work right? If I'm not misunderstanding it.

I went ahead and did exactly this, and still didn't work.

[alexchopin]

Not really, there is more modifications to make it work.
Btw, Nuxt is not built to develop mobile app and we don't really plan to develop on this way because some other good framework with already exist for that like Weex and Quasar Framework

[allanroger]

I've seen Quasar and Weex. But none of them really support SSR out of the box. Also, Weex is very experimental right now. Anyway, I like Nuxt a lot. I need to support Web and Mobile env, with SSR, built in Vue, and I think Nuxt is really close to that.

You guys don't need to officially support mobile development, nor compete with Quasar or Weex. As long someone can integrate it with Cordova and wrap the dist files in a Cordova webview, it will works fine.

(Was it really needed to close the topic already?)

[ammichael]

I'm trying to find some workaround to this same issue. Just like @allanroger said, the only problem, I guess, is the need the files being served, and my only guess the reason behind it is server side rendering.

@alexchopin any chance nuxt build a static dist version without the need for serving the files? That would be enough to get cordova working.

[allanroger]

I've reached this point: The project is ready to deploy, but it needs to be served. What I need, actually, is a way to deploy the static files without needing to serve them.

I know Nuxt is meant to be a SSR framework, but the framework itself is so awesome that I want to use without including the SSR.

Maybe generating passing an argument to generate the static files without ssr?

Thanks

[Atinux]

I will try to find a workaround for it, maybe something like nuxt generate --no-srr

It would be awesome if you could create a example repository with nuxt.js + cordova so I can try to work on it @allanroger. It will help me to work on it.

[allanroger]

@Atinux here is the repository https://github.com/allanroger/nuxt-cordova.

The instructions are on README.

Thanks in advance.

[voidale]

What am I missing, I thought nuxt generate is already just static html with no ssr? Thanks

[ammichael]

@voidale Nop, it's not. It needs to be served. I tried to send it to GitHub Pages and didn't work too. In docs it's not saying anything special about it; just generate and push to the branch, which, in my case, didn't work.

[Atinux]

It works on github pages @ammichael since we host the website nuxtjs.org on it.

[ammichael]

@Atinux yeap, I know! But when I send it to my GitHub Pages branch it behaves exactly the same way when I just get the index.html and open it in my local browser; styles and routes doesn't import.

Check it here: https://ammichael.github.io/uniao_contabil/

[Atinux]

Did you set the router.base to /uniao_contabil/ in your nuxt.config.js?

[ammichael]

Nop. Gonna give it a try and I'll report here

[voidale]

I'm hosting it fully static on aws s3 + cloudfront so no ssr. Generated it
with npm run build + npm run generate.

On 8 Feb 2017 22:30, "Michael Amaral" [e-mail] wrote:

Nop. Gonna give it a try and I'll report here

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/168#issuecomment-278467789, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AEPpqms1QgvqM6QVOqaiqbJOBHzfeYPRks5rajQGgaJpZM4Lunuk
.

[ammichael]

Yep, changing the router.base works fine (:

[smyth64]

so the app is running on my iphone, but it seems like the ressources like .js and .css files are not loaded properly.

[smyth64]

Why is this closed and also removed from the roadmap?

Is there any solution to run make a cordova app out of it?

[veresnikov]

+1
Why is this closed and also removed from the roadmap?

Is there any solution to run make a cordova app out of it?

[Atinux]

It's possible with the "spa" mode available in 1.0

[brianshepanek]

Here's the config I ended up using in nuxt.config.js to get this to work:

1) mode : 'spa'
2) router.mode : 'hash'
3) build.publicPath : '/nuxt/'

Then install "replace" and update your package.json script to:

nuxt generate && replace '/nuxt/' 'nuxt/' cordova -r

The comment about directories prefixed with underscores is correct, the real addition is replacing the paths in the generated index.html and manifest.js to not include the first slash which cordova can't find.

Hope this helps!

[zspencer]

@brianshepanek Thanks this is super helpful, could you clarify what cordova -r is doing in your example? Is cordova the path to the cordova projects www directory? Also, what version of replace are you running and which OS, as the replace binary that comes with OS X does not appear to play nicely with -r, which makes me think for those of you on a mac you will need to recursively execute the replace command against all files in your www directory.

[brianshepanek]

@zspencer Wow sorry that was not very clear!

Yes I have the 'generate.dir' property set to 'cordova' to differentiate the output of the web deployment and the cordova deployment.

So that replace command is recursively replacing every instance of '/nuxt/' with 'nuxt/' in the output directory named 'cordova'.

I am currently using replace v0.3.0.

The commands are all running in a Docker container on OS X using the node:8.9.4-alpine image from Docker Hub.

Hope this helps! Let me know if you have any more questions.

[zspencer]

No worries, what winds up working in os x is:
(Assuming a cordova www folder named mobile-www

 npx nuxt generate && rm -rf mobile-www/* && cp -r dist/* mobile-www/ && replace '/nuxt/' 'nuxt/' -- $(find mobile-www -type f)

That said, I'm still diving into the land of debugging cordova/nuxt apps so I'll probably have more questions later :/

[brianshepanek]

Gotcha! I also found it's also easier to create a new npm command called "cordova" in package.json:

"cordova": "nuxt generate -c cordova.nuxt.config.js && replace '/nuxt/' 'nuxt/' cordova -r"

That way I can define a different nuxt config file specifically for cordova.

[zspencer]

Any chance you can drop your entire cordova.nuxt.config.js? I'm sure that there are things I should have in there that I'm just missing completely because I'm new to both the technologies.

For instance:

1. Pretty sure I need to link in cordova.js in the nuxt header
2. Do I need vue-cordova?

From the perspective of being able to do rapid prototyping that allows us to use the same build pipeline for browser and native-ish mobile nuxt seems sooooo close to exactly what we want... But I feel like there's a small missing link that needs to exist. Maybe once I get this figured out I'll spin out a package that bridges the two systems.

(P.s. if you're down for pairing on said package sometime, hit me up via email! I'm pretty generally available for that kind of thing.)

[brianshepanek]

1) Yep you're right there and you can add it easily in the config head (bonus fun fact: include viewport-fit=cover in the meta section to fix some wonky iPhone X/Cordova issues)
2) I'm actually not sure if you need vue-cordova, however I use it to check for device ready and then check some plugin statuses

Here's the pared down version of the config that I use:

Setting loading to false is not necessary, just a preference.

module.exports = {
    mode : 'spa',
    head: {
        meta : [
            { hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1, minimal-ui, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover' },
        ],
        script: [
            { src : 'cordova.js'}
        ],
    },
    loading: false,
    plugins: [
        '~plugins/cordova'
    ],
    router: {
        mode: 'hash'
    },
    build : {
        publicPath : '/nuxt/'
    },
    generate : {
        dir : 'cordova'
    }
}

Then the cordova plugin looks like this:

import Vue from 'vue';
import VueCordova from 'vue-cordova';
Vue.use(VueCordova);
export default ({app: {router}, store}, inject) => {
    Vue.cordova.on('deviceready', () => {

        /*
        Do Something
        */

    });
}

[hassan-jahan]

Thanks for tips. But I still couldn't make cordova work with nuxt (nuxt7). All files are loaded properly but nothing can be shown (only loading spinner with no error).

I found out cordova on browser platform works with http://localhost:8000 but not with http://localhost:8000/index.html Does this help?

[zspencer]

I am filled with shame! I had my config using route: { mode: 'hash' } instead of router: { mode: 'hash' } which is why navigation wasn't working. @cyberiaa - may be worth double-checking that as
there was a minor typo in @brianshepanek's comment providing the instructions.

[hassan-jahan]

I tested it but seems Nuxt7 override route options to work with Framework 7 navigation. So that doesn't make change.

Anyway, I endup changing
<content src="/index.html" />
to
<content src="/index.html#!/" />

in my cordova config.xml and it worked :)

[brianshepanek]

@zspencer - The shame is mine! I've updated that comment to reflect the proper parameter. Thanks for pointing that out.

@cyberiaa - I believe your config.xml should have that block set up as
<content src="index.html" />
Without the leading slash.

Give that a try. Cordova can't find absolute paths like that, same reason the command I posted
replace '/nuxt/' 'nuxt/'
Sets all the links to relative not absolute.

[hassan-jahan]

I tested it again, "index.html" doesn't work at least with Nuxt7,
There is no problem with or without first / while the second part (#!/) is essential.

[dotneet]

I've found out an idea that improve browser based development.

Below setups enables to use npm run dev for development using cordova.

nuxt.config.js

const serveStatic = require('serve-static')

module.exports = {
  serverMiddleware: [
   { path: '/cordova.js', handler: serveStatic(__dirname + '/platforms/browser/www/cordova.js') },
   { path: '/cordova_plugins.js', handler: serveStatic(__dirname + '/platforms/browser/www/cordova_plugins.js') },
   { path: '/plugins', handler: serveStatic(__dirname + '/platforms/browser/www/plugins') }
  ]
}

[randyhoulahan]

Can anyone here with a working copy share a link to their repo?

[amanpreet-github]

@brianshepanek thanks you saved my day.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.