electron-nuxt icon indicating copy to clipboard operation
electron-nuxt copied to clipboard

Instructions for adding electron-nuxt to existing nuxt project?

Open xinbenlv opened this issue 4 years ago • 6 comments

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

xinbenlv avatar May 18 '20 23:05 xinbenlv

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

Alexpinilla avatar Jun 08 '20 15:06 Alexpinilla

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

minute-med avatar Apr 25 '21 10:04 minute-med

@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.

nwittwer avatar Apr 26 '21 08:04 nwittwer

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

M-Barari avatar Sep 13 '21 05:09 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

I have the same problem, someone found a solution?

wimil avatar Jun 26 '22 05:06 wimil

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

import moment from 'moment';

const moment = require('moment');

Hope this help!

shokmaster avatar Nov 11 '22 13:11 shokmaster