Vue-cli add plugin error

[c6p]

Adding the plugin results in following error:

🚀  Invoking generator for vue-cli-plugin-nativescript-vue...
 ERROR  Error: Cannot find module '@vue/cli-service/generator/template/src/router.js' from

It seems paths are fixed in latest commit. I guess npmjs package needs to be updated.

[yerol]

@rigor789 The paths are fixed on master apparently but the project is not released afterwards. Npm is resolving to old code hence this is still broken on builds. We need a new release to fix this issue please.

[rigor789]

@yerol I can create a new release, but do know that this is very much a WIP, and there is nothing in place for actually building the project, this only scaffolds the files and folders, nothing else.

[yerol]

@rigor789 Yeah I figured. I actually fixed couple of other issues after resolving this one locally. I'll create a PR for you with those changes and then you can release maybe. Should be ready in a couple of hours.

On a separate note, I'll take a stab at combining the tns build process from cli-template project if you don't mind. Would be great if you can share your plans (structural mostly) for this plugin going forward. Thanks.

[rigor789]

@yerol that would be awesome!

The initial plan is to allow building an app with cli 3.x from the same exact file structure as a regular web based project.

In order to get this working we need to

• overwrite web specific files with NativeScript specific ones (this is somewhat done, just needs to be updated)
• add additional commands to the package json (watch:ios, watch:android, build:ios, build:android etc.)
• make these commands do what they are supposed to:
  • initialize a NativeScript project
  • proxy commands to the tns cli (tns run android tns run ios etc)
• Nice to have: UI for the new Vue CLI UI, so the most common tasks can be done visually
  • include configuration for all required keys for releasing
  • buttons to start the app, trigger a rebuild, open a debugger window (chrome devtools, and hopefully VueDevtools at some point - this is not yet possible).

[yerol]

@rigor789 PR is ready for review. I have bumped up the version number to 0.0.3 as this package is currently on 0.0.2 on npm even though package.json says it is 0.0.1.

I'll continue with tns build after this. I'll start with copying over the logic from cli-template. Might need your input, will let you know.

[yerol]

@rigor789 btw, will need you to npm publish after this so this issue can be resolved.

[yerol]

@c6p The PR is now merged and this issue should be resolved now. Although still need an npm publish from @rigor789

I'm very close to integrating tns build as well. Will send another PR soon.

[rigor789]

@yerol @jiraiya972 figured out a neat way to avoid the template folder in the app structure, we will be moving towards a similar solution for this plugin as well as the vue-cli-template. https://github.com/jiraiya972/nativescript-vue-cli-template

We can most likely combine the two efforts soon!

[yerol]

looks very interesting. Could be a bit tricky to get it working as is with vue cli 3 though. we'll see. Thanks for letting me know.

[rigor789]

I think we can get it working with vue cli3, I haven't got the time to properly test it, but we can create a webpack.config.js in the root of the project (using a cli3 generator) and export the resolved config from @vue/cli-service/webpack.config.js, which is the final config after all the plugins are applied. That way tns run <android|ios> --bundle commands will work in the vue cli3 project (the src folder needs to be renamed to app as well, but I think that should be doable easily).

[jiraiya972]

Hello I started to look at how vue-cli3 works. The integration of my template seems a bit "complex" than that of the old because vue-cli completely masks the file webpack.config.js. This makes it impossible to use the --bundle option of the tns command.

I have to make sure that the target remains the dist directory and launch the tns command from this directory which is the behavior of the current template.

There is also the directory name in which is configurable via the nsconfig.json file. It is read and passed as an argument to webpack via the tns command. here I will have to put it in the webpack.

The only improvement of my template would be the deletion of the template directory that must be modified to use the tns plugins.

I think we should not export the global webpack.config.js to keep phylosophy from vue-cli3. The same file for everyone to symplify updates to existing projects.

I still have trouble understanding how vue-cli handles incompatible plugins. For example babel and typescript.
The nativescript plugin will be incompatible with a lot of other I guess. For example, that of the E2E test.
We would have a complicated cli where we do not know what to choose as an option for fear of having a project that does not work in the end.

[rigor789]

@jiraiya972 I figured that we can have a webpack config in the root of a cli 3.x project, and export the generated config from @vue/cli-service/weback.config.js. This way the --bundle flag should pick it up without issues as long as we make sure the config is generated the same way...

[jlooper]

hi, folks, I'd love to reboot this project to see if we can permanently move away from the old 'CLI 2' means of invoking vue init to create a project, and move instead towards the CLI 3 method. I think this project needs to be updated to reflect NativeScript-Vue 2.0.x and the newer template structure, what would you prefer I look at? I'd like to help (also to learn more about building plugins). thanks!

[jawa-the-hutt]

@rigor789, @jlooper

I should hopefully have a pull request for getting the entire pipeline setup for CLI 3 in the next few days. I have it manually working right now and am trying to back my way into getting the entire automation and template process working.

right now I can run npm run build:android and it will call a npm script that runs "vue-cli-service tns --android --mode android and it will build the entire thing. In my manual testing it will also essentially do a tns run android as well.

This will require the use of a temporary webpack.config.js be written to the root of the directory. With webpack-chain and the CLI we can grab the dynamic config from the CLI and write it out, run the tns commands and then delete the file at the end. This is really a hard limitation of the nativescript-dev-webpack project where they hard code the location to expect the webpack.config.js file to live. It's not even configurable to point it to another directory. It flat out requires a file and we can't pass in the config at runtime and let it work. Would probably require a major rewrite of that project to enable that to happen.

anyways, hopefully by no later than early next week I can submit a PR and we can finally use CLI 3 for this stuff.

[jlooper]

This is really exciting to hear! Is the structure of the app built aligned to the new folder structure?