3

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.

Léonce Aklin
  • 101
  • 3
  • 7
  • Have you taken a look to the code sharing section of the documentation: https://nativescript-vue.org/en/docs/getting-started/code-sharing/ – Plpicard Jul 22 '20 at 15:18
  • Thank you very much for your answer. Yes, I followed the steps there to set it up, however the documentation does not have any advices for troubleshooting. I managed to install the cli plugin which added dependencies and package scripts as intended. It also added an ns_example folder. I copied App_Resources and main.native.js (adapted) into my nuxt project folder. Then I added an nsconfig.json as described [in the nativescript documentation](https://docs.nativescript.org/core-concepts/project-structure-app#the-nsconfigjson-file) to change the app path where main.native.js is located. – Léonce Aklin Jul 23 '20 at 14:06
  • I found out how to exclude files with .native.vue as ending over .nuxtignore (https://nuxtjs.org/api/configuration-ignore/). I still don‘t have a solution for all the other difficulties – Léonce Aklin Sep 10 '20 at 19:57

0 Answers0