Instructions for adding electron-nuxt to existing nuxt project?

[xinbenlv]

Hi Michal, this is awesome, I wonder if there are instructions for adding electron-nuxt to existing nuxt project that we can follow?

[Alexpinilla]

That is the most usual case. Please it would be nice to focus on give a solution for this!

[ErwanTouba]

Hi, i had the same use case and its probably not the best way to go but i simply

• copy / pasted my nuxt files in the src/renderer/ folder (except nuxt.config.js)
• updated the electron-nuxt project's nuxt.config.js file with the config of my previous nuxt project
• added the npm packages i was using on my nuxt project with yarn
• yarn install & yarn dev

NB:

• For some reason with electron-nuxt you can't use(by default) import / export synthax in electron-nuxt's nuxt.config.js file (so becarefull not to copy/pase your nuxt project's nuxt.config.js file cause its use import / export synthax)

• I'm was using vee-validate package for input validation and i had to specify in nuxt.config.js to transpilate a specific folder (vee-validate/dist/rules) during build in order to avoid the unexpected token export error (cf https://vee-validate.logaretm.com/v3/guide/rules.html#importing-rules-in-nuxt-js).

build: {
    // https://vee-validate.logaretm.com/v3/guide/rules.html#importing-rules-in-nuxt-js
    transpile: ['vee-validate/dist/rules'],
  },

I don't know why but with electron-nuxt the above config in nuxt.config.js is ignored.
as a workaround i used thte .umd version of the rules files of the same folder.

Then i had my project up and working
Hope this help

[nwittwer]

@michalzaq12 What if there was a CLI solution for electron-nuxt, similar to Storybook's CLI sb init command? They also use a similar structure, with .storybook/ containing the library files, and I think it also checks package versions for compatibility.

A CLI solution could be extended to also cover updating electron-nuxt (since that's similarly a very manual process currently). Using a similar solution to Storybook's CLI, where one can run sb upgrade. They put together some easy-to-follow migration guides when a new version comes out.

[M-Barari]

Hi, i had the same use case and its probably not the best way to go but i simply

• copy / pasted my nuxt files in the src/renderer/ folder (except nuxt.config.js)
• updated the electron-nuxt project's nuxt.config.js file with the config of my previous nuxt project
• added the npm packages i was using on my nuxt project with yarn
• yarn install & yarn dev

NB:

• For some reason with electron-nuxt you can't use(by default) import / export synthax in electron-nuxt's nuxt.config.js file (so becarefull not to copy/pase your nuxt project's nuxt.config.js file cause its use import / export synthax)
• I'm was using vee-validate package for input validation and i had to specify in nuxt.config.js to transpilate a specific folder (vee-validate/dist/rules) during build in order to avoid the unexpected token export error (cf https://vee-validate.logaretm.com/v3/guide/rules.html#importing-rules-in-nuxt-js).

build: {
    // https://vee-validate.logaretm.com/v3/guide/rules.html#importing-rules-in-nuxt-js
    transpile: ['vee-validate/dist/rules'],
  },

I don't know why but with electron-nuxt the above config in nuxt.config.js is ignored.
as a workaround i used thte .umd version of the rules files of the same folder.

Then i had my project up and working
Hope this help

@ErwanTouba so how did you solve import in nuxt.config.js file?? I can't just remove it! and about vee-validate , can you explain more how to solve that?? tanx

[wimil]

Hi, i had the same use case and its probably not the best way to go but i simply

• copy / pasted my nuxt files in the src/renderer/ folder (except nuxt.config.js)
• updated the electron-nuxt project's nuxt.config.js file with the config of my previous nuxt project
• added the npm packages i was using on my nuxt project with yarn
• yarn install & yarn dev

NB:

• For some reason with electron-nuxt you can't use(by default) import / export synthax in electron-nuxt's nuxt.config.js file (so becarefull not to copy/pase your nuxt project's nuxt.config.js file cause its use import / export synthax)
• I'm was using vee-validate package for input validation and i had to specify in nuxt.config.js to transpilate a specific folder (vee-validate/dist/rules) during build in order to avoid the unexpected token export error (cf https://vee-validate.logaretm.com/v3/guide/rules.html#importing-rules-in-nuxt-js).

build: {
    // https://vee-validate.logaretm.com/v3/guide/rules.html#importing-rules-in-nuxt-js
    transpile: ['vee-validate/dist/rules'],
  },

I don't know why but with electron-nuxt the above config in nuxt.config.js is ignored.
as a workaround i used thte .umd version of the rules files of the same folder.
Then i had my project up and working
Hope this help

@ErwanTouba so how did you solve import in nuxt.config.js file?? I can't just remove it! and about vee-validate , can you explain more how to solve that?? tanx

I have the same problem, someone found a solution?

[shokmaster]

About import, you just need to convert it into require:

import moment from 'moment';

const moment = require('moment');

Hope this help!