Wails: How to connect it to Nuxt

[AndreiD]

Hello all,

I like vue & all, but I found the nuxt framework much easier for a beginner. https://nuxtjs.org/
does anyone know how I can connect Wails to Nuxt

~~~
import Bridge from "./wailsbridge";

Bridge.Start(() => {
new Vue({
render: h => h(App)
}).$mount("#app");
});
~~~

but there isn't any "App" in Nuxt.

I tried via a plugin but:

~~~~
import Bridge from "./wailsbridge";

export default ({ app }) => {

Bridge.Start(() => {
???????
});

}
~~~~

[leaanthony]

Hi @AndreiD. I'm unfamiliar with Nuxt. If it's different enough from the Vue template, a nuxt specific template may be needed. The code within the start() method is whatever code you'd normally run to start Nuxt.

[bh90210]

Hey @AndreiD it's late over here so if my answer has gaps I will come back tomorrow.

For now a couple of things:

1. What you are after is this https://nuxtjs.org/api/configuration-global-name#the-globalname-property wails tries to find 'app' id.
   ```Example:

nuxt.config.js

{
globalName: 'myCustomName' <--- change to 'app'
}

2. WailsBridge I feel I want to say it should go here `/layouts/default.vue` but that is just a guess I might be 100% wrong 

Wails.Init(() => {

});
```

1. other than that and I haven't looked much into what options nuxtjs gives you when building, but I suspect they went after reactjs' create-react-app strategy. We dealt with that on reactjs implementation.
   Essentially for nuxtjs to produce the build wails needs we'll have to fork this repo https://github.com/nuxt/create-nuxt-app alter it as needed and then push it to our npmjs (ie. https://www.npmjs.com/package/wails-react-scripts)
   again - I might be wrong on this one as well I'll have a better look in a few hours :+1:

[bh90210]

hello, I just realised your are probably using an "older" version of wails! There were some breaking changes around v0.17.6-pre.
I would recommend to wails update -pre which will install v0.17.11-pre but the documentation is not ready yet.
If u feel adventurous though give it a try! But otherwise please ignore the Wails.Init(() => { part as _it doesn't apply_ to your version.

[AndreiD]

if you want, you can implement https://gitcoin.co/products or some similar reward. I want to give come crypto to anyone that wants to solve this integration

[leaanthony]

We will certainly look at getting this into v0.18.0. There's been a lot of changes and we need to make sure we don't break everything so nuxt will be bleeding edge for a couple of weeks or so. Just setting expectations 😃

[o1lab]

+1

Pointers to integrate with nuxt would be great
Came across wails in one of the meetups. 👍

And is there a way we can call/use any npm package in wails ?

[leaanthony]

Hi! Looks like GitHub lost my original reply.
You can use any npm package you like so long as it can be used in a browser/packed by webpack.
Out of interest, what Meetup was it and are there slides online? We have a links page and would love to add more content to it.

[AndreiD]

I think the issue is... we're novices in Javascript. Of course it can be integrated with whatever, but can someone help us with a sample project :+1:

[leaanthony]

Of course @AndreiD. I'm not personally across every framework so this really has to be a community effort. We really want to encourage everyone to participate! 🚀

[bh90210]

OK I have an implementation in the working. I'll have files in a few hours.

I've forked create nuxt app and modified it as necessary (haven't pushed anything yet..) to produce a build that will work with a wails template I am also working on.
I will upload to npm like we did here under wails-nuxt-app and hopefully you will be able to create new projects by running npx wails-nuxt-app <project-name>
_note: wails at the moment and it seems it will stay this way, is not supporting yarn, I am either going to remove the option from nuxt modified cli or leave it there, but please when creating new projects always choose npm._

How it will work:

• First you will have to update to latest wails -pre release (although we are a few days away from v0.18.0)
• Then you will have to git clone the template from my repo inside $GOPATH/src/wailsapp/wails/cmd/templates

to create a new nuxt based project you'll have to

1. run wails init as normally and choose nuxt template option (at the end of the prompts wails will try to build the project, it will fail but that's ok)
2. then you'll have to cd in new-project and run npx wails-nuxt-app frontend (or alternatively cd in new-project/frontend & npx wails-nuxt-app), choose whatever options you'd like. wails-nuxt-app will place all new generated files under new-project/frontend/*.

from this point on you will be able to use wails build, wails serve and npm run dev as expected .

Is this solution alright for now? (honestly I don't think it gets much better)

[leaanthony]

If this works as intended @bh90210, let's get a PR! 🚀

[AndreiD]

Hello. I tried to follow all the steps in your "tutorial" but I can't make it to work. building it looks for

~~~~
⣽ Packing + Compiling project...2019/08/24 17:47:12 open /home/me/workspace_learn/wailsnuxttemplate/frontend/dist/app.js: no such file or directory

Mewn

✗ Packing + Compiling project...
Error: exit status 1
~~~~

upon building the nuxt project, you get

so there isnt' any app.js there. That is for Vue.js but Nuxt has a little different.

also I can't get the window to pop-up. It blocks at ">>>>> To connect, you will need to run 'npm run serve' in the 'frontend' directory <<<<<",
but in frontend there's already "npm run dev" running (not serve, as nuxt use dev)

[bh90210]

I haven't finished the work yet :)
just explained a possible scenario to see if everyone is onboard before start working the implementation :+1:

there are two issues remaining to solve and I'll have everything working but I am not expert with js either so please be patient.

[AndreiD]

sorry, I missed the part "How it WILL work".
Wouldn't it be simpler just to make a ready made project, with everything connected, instead of all this installers

[codeg33k]

I'm trying to carve out some time to start contributing.

[leaanthony]

@AndreiD the way it works for the other frameworks is that you just generate a skeleton project and you get a base build. Not sure that's any need for more them that?

[bh90210]

wrong person tag.. 😂

[leaanthony]

If we can't get this working this week, let's look at it post v1.

[leaanthony]

@AndreiD moving this to after the v1 release which will be November. Priority is stabilisation and tying up loose ends for the v1 release.

[leaanthony]

Closing for now and listing on the https://github.com/wailsapp/wails/wiki/Post-V1-Enhancements page