How to set up a NativeScript Vue code sharing project in a Nuxt project

Viewed 1014

I tried to set up a codesharing NativeScript project in an existing Nuxt.js project using the nativescript-vue-cli-plugin. Unfortunately the plugin leaves me with several errors after setup.

  1. Nativescript Vue seems to parse all component files as nativescript templates (and fails of course). I could append the "web" attribute to every <template> in my project but nuxt does not parse them anymore when I do this. How can I achieve that Nuxt uses <template web> templates?

  2. Webpack can't resolve some modules. For example I'd like to import a css file located in @mdi/font/css/materialdesignicons.css. Webpack seems to read this as ./@mdi/font/css/materialdesignicons.css and can't resolve it. How do I have to modify the webpack config that this works?

  3. A Module I use for the web version, compile-sass, throws an error because it can't resolve "child_process". The error does not appear when I use it with nuxt. I found a Question which addresses this issue in an other context but the solution does not work for me.

  4. Unless I run tns preview etc. directly instead of npm run preview:ios etc., Nativescript does not find the main.native.json file defined in nsconfig.js in the project root. That means it has to do something with the npm run setup-webpack-config command.

Some of these problems are very specific to my setup so a more general guide about how to use Nativescript codesharing with a Nuxt project would be appreciated.

0 Answers
Related