nativescript-vue / vue-cli-plugin-nativescript-vue

A vue cli 3.x plugin for NativeScript-Vue

Yes, the image needs to be updated :)

NativeScript-Vue3 RC

NativeScript-Vue with Vue3 support now in RC!

Quick start

To get started, you can use the StackBlitz Template

...or locally:

ns create myAwesomeApp --template @nativescript-vue/template-blank@rc

cd myAwesomeApp
ns run ios|android

Vue Devtools

To use VueDevtools, run:

ns run ios|android --env.vueDevtools

This will launch the standalone VueDevtools, and connect to it once the app launches. Right now, devtools are only supported on iOS Simulators and Android Emulators, but physical device support should come soon (requires configuring a host/port that the device can connect to.).

On android, you must enable cleartext http traffic, otherwise any connections are silently dropped by the system. In the App_Resources/Android/src/main/AndroidManifext.xml add the following to your existing <application> tag:

<application ...
+  android:usesCleartextTraffic="true"
.../>

Issues

If you encounter any issues, please open a new issue with as much detail as possible.

• Join Discord

Looking for V2?

The V2 version has been moved to the v2 branch

vue-cli-plugin-nativescript-vue's Issues

Using template Nativescript-Vue-Web error in iOS

If you use this template, in the App.vue file, needs to import the component HelloWorld. Otherwise there will be an error when you try the app in iOS.

Needs proper import

import HelloWorld from './components/HelloWorld';
components: {
   HelloWorld,
}

default project is not compatible with NativeScript CLI 6.0

when I follow the readme and create a vue project then add this plugin, the default project is not compatible with NativeScript CLI 6.0, I have to run tns migrate before I can run npm run debug:android.

I think the default template should be updated to be compatible with latest 6.0 version.

Error when installing plugin to project using vue-cli 3

I tried using vue create project-name as well as vue ui with default preset (babel, eslint) as well as default plugin options to create my project but I'm still receiving this error.

$ npm --version
6.9.0
$ npm list -g --depth=0
@vue/[email protected]

+ [email protected]
added 18 packages from 6 contributors and audited 24842 packages in 14.756s
found 0 vulnerabilities

 ERROR  TypeError: Cannot read property '1' of null
TypeError: Cannot read property '1' of null
    at module.exports.extractCallDir (/home/aes/Sandbox/zen-code-sharing/node_modules/vue-cli-plugin-nativescript-vue/generator/index.js:907:78)
    at module.exports.renderDirectoryStructure (/home/aes/Sandbox/zen-code-sharing/node_modules/vue-cli-plugin-nativescript-vue/generator/index.js:847:27)
    at /home/aes/Sandbox/zen-code-sharing/node_modules/vue-cli-plugin-nativescript-vue/generator/index.js:199:11
    at Generator.resolveFiles (/usr/lib/node_modules/@vue/cli/lib/Generator.js:209:13)
    at processTicksAndRejections (internal/process/task_queues.js:88:5)
    at async Generator.generate (/usr/lib/node_modules/@vue/cli/lib/Generator.js:116:5)
    at async runGenerator (/usr/lib/node_modules/@vue/cli/lib/invoke.js:133:3)
    at async invoke (/usr/lib/node_modules/@vue/cli/lib/invoke.js:117:3)
Error: Command failed: vue invoke vue-cli-plugin-nativescript-vue --$inlineOptions {"applicationId":"org.nativescript.application","historyMode":false,"isNewProject":true,"isNativeOnly":false,"templateType":"simple"}
adding to package.json
deleting from package.json
doing template rendering

🚀  Invoking generator for vue-cli-plugin-nativescript-vue...

    at makeError (/usr/lib/node_modules/@vue/cli/node_modules/execa/index.js:174:9)
    at /usr/lib/node_modules/@vue/cli/node_modules/execa/index.js:278:16
    at processTicksAndRejections (internal/process/task_queues.js:88:5) {
  code: 1,
  stdout: 'adding to package.json\ndeleting from package.json\ndoing template ' +
    'rendering\n\n🚀  Invoking generator for ' +
    'vue-cli-plugin-nativescript-vue...\n',
  stderr: null,
  failed: true,
  signal: null,
  cmd: 'vue invoke vue-cli-plugin-nativescript-vue --$inlineOptions ' +
    '{"applicationId":"org.nativescript.application","historyMode":false,"isNewProject":true,"isNativeOnly":false,"templateType":"simple"}',
  timedOut: false,
  killed: false
}

package.json

{
  "name": "zen-code-sharing",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-nativescript-vue": "0.0.14",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Should we expect this plugin to work out of the box?

Also related with the #54

When I try to run the plugin, it is not working as expected, as described in the README file.

Thank you very much for creating this plugin. But it would be nice to know if this is still expected to work out of the box or not to prevent time losses.

The example project mandala is also not working.

Thank you!

Syntax error: invalid regular expressions

When running the generator I get the following error in the console leading to not being able to run the generator.

 ERROR  SyntaxError: Invalid regular expression: /(?<fileName>[^(\s]+):[0-9]+:[0-9]+/: Invalid group

Seems to be related to a recent PR
#12

[Vue warn]: Unknown custom element

I have run a fresh install through the Vue UI using the Nativescript-Vue-Web starting template and have encountered the following errors when running npm run serve:web:

This is my App.vue:

This is the component HelloWorld.vue:

And this is what is rendered:

Indeed, the <Page>, <ActionBar>, and <GridLayout> are not rendered as I would expect.

Can someone help me understand whether the Nativescript-Vue-Web starting template supports these custom elements, and if so, how to fix this?

I am using:

• Vue v2
• Typescript with class based components
• Nativescript-Vue-Web starting template

Thanks very much!

vue create web-mobile-project is not working

First of all I'm very new to front-end development and NativeScript. I tried to follow exact steps described at https://nativescript-vue.org/en/docs/getting-started/code-sharing/ but it seems it's broken.

There are issues at src/router.js and webpack.config.js

from that I managed to solve errors in webpack by removing escape characters.

Exact usage in terminal is below.

➜ web-mobile-app git:(master) vue add vue-cli-plugin-nativescript-vue

📦 Installing vue-cli-plugin-nativescript-vue...

yarn add v1.19.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
└─ [email protected]
✨ Done in 6.26s.
✔ Successfully installed plugin: vue-cli-plugin-nativescript-vue

? Enter a unique application identifier: com.kintell.webmobileapp
? Use HTML5 history mode? (Default: hash mode) No
? Is this a brand new project? (Default: Yes) Yes
? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web
? What type of template do you want to start with? (Default: Simple) Simple

🚀 Invoking generator for vue-cli-plugin-nativescript-vue...
adding to package.json
deleting from package.json
doing template rendering
📦 Installing additional dependencies...

yarn install v1.19.2
[1/4] 🔍 Resolving packages...

success Saved lockfile.
✨ Done in 47.92s.
⠋ Running completion hooks...dual components env files
error: Parsing error: Unexpected token, expected ","

2 | require('@vue/cli-plugin-router/generator')(api, {
3 | historyMode: options.routerHistoryMode

4 | };
| ^
5 | export default new Router(options);
6 | }
7 | at src/router.js:4:4:
2 | require('@vue/cli-plugin-router/generator')(api, {
3 | historyMode: options.routerHistoryMode
4 | };
| ^
5 | export default new Router(options);
6 | }
7 |

error: Unnecessary escape character: / (no-useless-escape) at webpack.config.js:214:25:
212 | },
213 | {

214 | test: /[/|\]app.css$/,
| ^
215 | use: [
216 | 'nativescript-dev-webpack/style-hot-loader',
217 | {

error: Unnecessary escape character: / (no-useless-escape) at webpack.config.js:224:25:
222 | },
223 | {

224 | test: /[/|\]app.scss$/,
| ^
225 | use: [
226 | 'nativescript-dev-webpack/style-hot-loader',
227 | {

error: Unnecessary escape character: / (no-useless-escape) at webpack.config.js:236:28:
234 | {
235 | test: /.css$/,

236 | exclude: /[/|\]app.css$/,
| ^
237 | use: [
238 | 'nativescript-dev-webpack/style-hot-loader',
239 | 'nativescript-dev-webpack/apply-css-loader.js',

error: Unnecessary escape character: / (no-useless-escape) at webpack.config.js:245:28:
243 | {
244 | test: /.scss$/,

245 | exclude: /[/|\]app.scss$/,
| ^
246 | use: [
247 | 'nativescript-dev-webpack/style-hot-loader',
248 | 'nativescript-dev-webpack/apply-css-loader.js',

5 errors found.

Errors during `vue add nativescript-vue` with CLI v4

Hello,

I'm trying this plugin, and, first of all, thanks for the work to make this available.
Nevertheless, I encounter some bugs / problems during installation... with @vue/cli v4 .

Maybe related to #2 (comment)

When I create a new project with vue create my-dir, choosing some options with vue-router, then vue add nativescript-vue with options :

? Enter a unique application identifier: org.blabla.blibli
? Use HTML5 history mode? (Default: hash mode) Yes
? Is this a brand new project? (Default: Yes) Yes
? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web
? What type of template do you want to start with? (Default: Simple) Simple

I encounter this error :

 ERROR  Error: Cannot find module '@vue/cli-service/generator/router/template/src/router.js'
  from '/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/vue-cli-plugin-nativescript-vue/generator/templates/simple/src'

I think it's related to the fact that in the CLI v4, the vue-router has a dedicated plugin.

I try to update the nativescript-vue CLI plugin in a fork with a commit updating some paths.
With this version, seems ok.

I add another commit for the vuex store. (but not tested 'cause I don't use vuex)
I'm not sure the moveSync and copy will work in a missing directory. (the genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'store' dir doesn't exist yet ?)

I run yarn serve:web, and discover another error with sass-loader module missing.
I didn't say I was using sass (?!), but by adding this module as a dev dependency, webpack is happier.

So with a yarn add --dev sass-loader, yarn serve:web is ok and running on http://localhost:8080.

Now I go through Firefox on this URL, I encounter another error in Console Devtools :

[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

When I go to the src/main.js, I can't see anymore the import of router.
I fix it directly in my code by importing the router and adding it to the new Vue({}) instruction.
I don't know exactly how to fix this in the main.js (and main.native.js ?) of the plugin.

After that, routing is ok for my web browser.

Then I try yarn serve:android with an android device connected in debug, and after installing a webpack-cli (by the plugin), it doesn't work, and I'm stucked with this error :

yarn serve:android
yarn run v1.19.1
$ npm run setup-webpack-config && tns run android --env.development
npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1573508599710-0.2997973760755772/node but npm is using /home/mdartic/.nvm/versions/node/v10.15.1/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> [email protected] setup-webpack-config /home/mdartic/workspace/madz/ns-code-sharing-sdis32
> node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre

copying CLI 3 version of webpack.config.js to project
Searching for devices...
Copying template files...
Platform android successfully added. v6.1.0
Preparing project...
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "yarn" to install the CLI via "yarn add -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'yarn add -D webpack-cli')...
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "webpack@>=2".
warning "nativescript-dev-webpack > [email protected]" has unmet peer dependency "typescript@*".
warning " > [email protected]" has unmet peer dependency "webpack@^4.36.0".
warning " > [email protected]" has unmet peer dependency "webpack@1 || 2 || 3 || 4".
warning " > [email protected]" has unmet peer dependency "[email protected]".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
starting nativeConfig
Bundling application for entryPath ./main.native...
TypeError: Cannot read property '__expression' of undefined
    at Object.toConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-chain/src/Plugin.js:56:38)
    at clean.Object.assign.minimizer.minimizers.values.map.plugin (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-chain/src/Optimization.js:39:66)
    at Array.map (<anonymous>)
    at module.exports.toConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-chain/src/Optimization.js:39:45)
    at module.exports.toConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-chain/src/Config.js:130:41)
    at Service.resolveWebpackConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/@vue/cli-service/lib/Service.js:250:34)
    at Object.<anonymous> (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/webpack.config.js:12:26)
    at Module._compile (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at yargs.parse (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/cli.js:71:45)
    at Object.parse (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
    at /home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at runCommand.then (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack/bin/webpack.js:143:5)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Do you have an idea ?

Are you interested by a PR with my code for the router/store issues ?

Can't we use the vue.config.js to make this android / ios jobs ? and avoid installing a webpack ? Just reuse the webpack already installed ?

Thanks for your reply

Clean install: HMR broken!

When creating a new project, using Vue CLI 3, both in CLI and UI mode.
Then adding vue-cli-plugin-nativescript-vue.

HMR simply keeps reloading the whole app & relaunching.

File change detected. Starting incremental webpack compilation...
....webpack compilation details here....
Webpack compilation complete. Watching for file changes.
Webpack build done!
Preparing project...
Project successfully prepared (iOS)
Successfully transferred bundle.js on device C023E95A-72B0-46B7-AD24-4B7480318E72.
Restarting application on device C023E95A-72B0-46B7-AD24-4B7480318E72...
Successfully synced application org.nativescript.application on device C023E95A-72B0-46B7-AD24-4B7480318E72.

When adding useLegacyWorkflow: false in nsconfig.json it then loads changes but those don’t get applied until force-quitting the app on device & opening again?

Tried running:

• tns run ios using default webpack
• npm run debug:ios
• npm run serve:ios
• a custom option using npm run setup-webpack-config && tns run ios --hmr --env.development

This does not happen when setting up a new project using nativescript-vue/vue-cli-template, in which case HMR is perfect.

Module not found: Error: Can't resolve '@vue/cli-plugin-typescript/generator/convert'

Version
4.2.3

Reproduction link
https://github.com/hamzaehsan95/testing-project.git

Environment info
System:
OS: macOS 10.15.2
CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
Browsers:
Chrome: 80.0.3987.132
Firefox: Not Found
Safari: 13.0.4
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.1.2
@vue/babel-preset-app: 4.2.3
@vue/babel-preset-jsx: 1.1.2
@vue/babel-sugar-functional-vue: 1.1.2
@vue/babel-sugar-inject-h: 1.1.2
@vue/babel-sugar-v-model: 1.1.2
@vue/babel-sugar-v-on: 1.1.2
@vue/cli-overlay: 4.2.3
@vue/cli-plugin-babel: ~4.2.0 => 4.2.3
@vue/cli-plugin-eslint: ~4.2.0 => 4.2.3
@vue/cli-plugin-router: 4.2.3
@vue/cli-plugin-vuex: 4.2.3
@vue/cli-service: ~4.2.0 => 4.2.3
@vue/cli-shared-utils: 4.2.3
@vue/component-compiler-utils: 3.1.1
@vue/preload-webpack-plugin: 1.1.1
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^6.1.2 => 6.2.2
nativescript-vue: ^2.5.0-alpha.3 => 2.5.0
nativescript-vue-template-compiler: ^2.5.0-alpha.3 => 2.5.0
vue: ^2.6.11 => 2.6.11
vue-cli-plugin-nativescript-vue: ~0.3.1 => 0.3.1
vue-eslint-parser: 7.0.0
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.0
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.11 => 2.6.11
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 4.2.3
Steps to reproduce
Please do yarn install.
Then tns run android
OR
tns run ios --emulator
What is expected?
The app should run

What is actually happening?
Throwing following errors.

ERROR in ../node_modules/@vue/cli-plugin-router/generator/index.js
Module not found: Error: Can't resolve '@vue/cli-plugin-typescript/generator/convert' in '/Users/hamza/VueProjects/testing-project/node_modules/@vue/cli-plugin-router/generator'
@ ../node_modules/@vue/cli-plugin-router/generator/index.js 18:25-80
@ ./router.js
@ . sync (?<!\bApp_Resources\b.)(?<!./\btests\b/.?).(xml|css|js|kt|(?<!.d.)ts|(?<!\b_[\w-]*.)scss)$
@ ./main.native.js

ERROR in ./App.vue?vue&type=style&index=0&web=true&lang=css& (../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack/apply-css-loader.js!../node_modules/css-loader/dist/cjs.js??ref--3-2!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=style&index=0&web=true&lang=css&)
Module not found: Error: Can't resolve 'styles/style-one' in '/Users/hamza/VueProjects/testing-project/src'
@ ./App.vue?vue&type=style&index=0&web=true&lang=css& (../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack/apply-css-loader.js!../node_modules/css-loader/dist/cjs.js??ref--3-2!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=style&index=0&web=true&lang=css&) 3:40-118
@ ./App.vue?vue&type=style&index=0&web=true&lang=css&
@ ./App.vue
@ ./main.native.js

ERROR in ./App.vue?vue&type=style&index=1&native=true&lang=css& (../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack/apply-css-loader.js!../node_modules/css-loader/dist/cjs.js??ref--3-2!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=style&index=1&native=true&lang=css&)
Module not found: Error: Can't resolve 'styles/style-one' in '/Users/hamza/VueProjects/testing-project/src'
@ ./App.vue?vue&type=style&index=1&native=true&lang=css& (../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack/apply-css-loader.js!../node_modules/css-loader/dist/cjs.js??ref--3-2!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=style&index=1&native=true&lang=css&) 3:40-118
@ ./App.vue?vue&type=style&index=1&native=true&lang=css&
@ ./App.vue
@ ./main.native.js

isVue3 is not defined

Hello,

I have a following issue. Looks to be a trivial one:

📦  Installing vue-cli-plugin-nativescript-vue...

+ [email protected]
updated 1 package and audited 1300 packages in 10.86s

54 packages are looking for funding
  run `npm fund` for details

found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
✔  Successfully installed plugin: vue-cli-plugin-nativescript-vue

? Enter a unique application identifier: org.nativescript.application
? Use HTML5 history mode? (Default: hash mode) No
? Is this a brand new project? (Default: Yes) Yes
? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web
? What type of template do you want to start with? (Default: Simple) Nativescript-Vue-Web - The Simple template, but with NS-Vue like syntax for web components

🚀  Invoking generator for vue-cli-plugin-nativescript-vue...
adding to package.json
deleting from package.json
doing template rendering
 ERROR  ReferenceError: ejs:1
 >> 1| <%_ if (isVue3) { _%>
    2| import { createApp } from 'vue'
    3| import App from '~/App.vue';
    4| import { Page, ActionBar, GridLayout, Button, Img, Label } from 'nativescript-vue-web';

isVue3 is not defined
ReferenceError: ejs:1
 >> 1| <%_ if (isVue3) { _%>
    2| import { createApp } from 'vue'
    3| import App from '~/App.vue';
    4| import { Page, ActionBar, GridLayout, Button, Img, Label } from 'nativescript-vue-web';

isVue3 is not defined
    at eval (eval at compile (/usr/lib64/node_modules/@vue/cli/node_modules/ejs/lib/ejs.js:652:12), <anonymous>:10:8)
    at anonymous (/usr/lib64/node_modules/@vue/cli/node_modules/ejs/lib/ejs.js:682:17)
    at Object.exports.render (/usr/lib64/node_modules/@vue/cli/node_modules/ejs/lib/ejs.js:419:37)
    at renderFile (/usr/lib64/node_modules/@vue/cli/lib/GeneratorAPI.js:523:14)
    at /usr/lib64/node_modules/@vue/cli/lib/GeneratorAPI.js:312:27
    at Generator.resolveFiles (/usr/lib64/node_modules/@vue/cli/lib/Generator.js:268:13)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Generator.generate (/usr/lib64/node_modules/@vue/cli/lib/Generator.js:175:5)
    at async runGenerator (/usr/lib64/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/usr/lib64/node_modules/@vue/cli/lib/invoke.js:92:3)

Postcss removed

It seems like this plugin removes the ability to use postcss is there a reason for this?

Broken router generator

Looks like router generation is currently broken, the generated file (src/router.ts) contains the following:

module.exports = (api, options) => {
  require('@vue/cli-plugin-router/generator')(api, {
    historyMode: options.routerHistoryMode,
  };
  export default new Router(options);
};

This is definitely not the desired result. A router/index.ts file is also generated, which looks correct for the most part, but the import { options } from './router' in main.native.ts no longer works.

After manually refactoring router/index to export the routes, and updating the routes.reduce function in main.native the app builds, but seems like the default route names have changed from lowercase to titlecase so goTo('home') and goTo('about') no longer work unless we either change the route names, or update the goTo calls to use the correct casing (home -> Home, about -> About).

Originally posted by @rigor789 in #35 (comment)

`main.js` being loaded alongside `main.native.js` when running `npm run serve:android`

I have an existing Vue web app, and I am trying to integrate this plugin to create a mobile app in the same code base.

I wanted to initially build a simple page for the mobile app without any ties to the web app. So I have created a App.native.vue file with a simple template and ran npm run serve:android. While the app starts on the mobile device, I get a lot of warning in the terminal related to the web app components.

I can also see from the terminal that the main.js file is also bundled for the mobile app:

I was expecting only the main.native.js file to be loaded. Is this an issue, or did I miss something?

From clean install, npm run debug:android with Nativescript 5.4 throws error

I'm not entirely sure if this is fully specific to this plugin, but this does not occur when creating a new project using the Nativescript-vue/vue-cli-template.

The problematic line of code is here in the tns-core-modules

It seems that between Typescript and webpack utils_1.mainThreadify cannot be found.

Any help or direction is appreciated.

tns --version: 5.4.0
node -v: v10.13.0
npm -v: 6.4.1
OS: Windows 10
@vue/cli: V3.7.0

Steps to reproduce:

vue create ns-vue-cli-3
- Vuex
- Vue Router
- Typescript w/ Babel
- Class Based Components
- SCSS (Dart)
cd ns-vue-cli-3
vue add vue-cli-plugin-nativescript-vue
- Router History Mode
- New App
Edit package.json tns-android to 5.4.0
tns platform remove android // just for good measure
npm run debug:android

Output from Emulator: (Android version: 8.0 (Oreo) - API 26)

(sorry for the long log dump, tried putting this in a <details> block but couldn't fully get the formatting to work)

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: 

Error calling module function 

Error calling module function 

TypeError: utils_1.mainThreadify is not a function
File: "file:///data/data/org.nativescript.application/files/app/vendor.js, line: 18502, column: 29

StackTrace: 
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18502, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18554, column: 34
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 39201, column: 18
	Frame: function:'../node_modules/tns-core-modules/ui/frame/frame.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 40462, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55211, column: 13
	Frame: function:'../node_modules/tns-core-modules/utils/mainthread-helper.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55243, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils-common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55484, column: 27
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55710, column: 10
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 268, column: 13
	Frame: function:'../node_modules/nativescript-vue/dist/index.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 13906, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 693, column: 120
	Frame: function:'./main.ts', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 728, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'0', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 921, column: 18
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 45, column: 23
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 149, column: 18
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 152, column: 10
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 2, column: 1
	Frame: function:'require', file:'', line: 1, column: 266
TypeError: utils_1.mainThreadify is not a function
File: "<unknown>, line: 1, column: 265
StackTrace: 
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18502, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18554, column: 34
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 39201, column: 18
	Frame: function:'../node_modules/tns-core-modules/ui/frame/frame.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 40462, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55211, column: 13
	Frame: function:'../node_modules/tns-core-modules/utils/mainthread-helper.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55243, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils-common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55484, column: 27
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55710, column: 10
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 268, column: 13
	Frame: function:'../node_modules/nativescript-vue/dist/index.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 13906, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 693, column: 120
	Frame: function:'./main.ts', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 728, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'0', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 921, column: 18
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 45, column: 23
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 149, column: 18
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 152, column: 10
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 2, column: 1
	Frame: function:'require', file:'', line: 1, column: 266


TypeError: utils_1.mainThreadify is not a function
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18502, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18554, column: 34
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 39201, column: 18
	Frame: function:'../node_modules/tns-core-modules/ui/frame/frame.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 40462, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55211, column: 13
	Frame: function:'../node_modules/tns-core-modules/utils/mainthread-helper.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55243, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils-common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55484, column: 27
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55710, column: 10
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 268, column: 13
	Frame: function:'../node_modules/nativescript-vue/dist/index.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 13906, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 693, column: 120
	Frame: function:'./main.ts', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 728, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'0', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 921, column: 18
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 45, column: 23
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 149, column: 18
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 152, column: 10
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 2, column: 1
	Frame: function:'require', file:'', line: 1, column: 266

at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5794)
at android.app.ActivityThread.-wrap1(Unknown Source:0)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1661)
at android.os.Handler.dispatchMessage(Handler.java:105)
at android.os.Looper.loop(Looper.java:164)
at android.app.ActivityThread.main(ActivityThread.java:6541)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
Caused by: com.tns.NativeScriptException: 

Error calling module function 

Error calling module function 

TypeError: utils_1.mainThreadify is not a function
File: "file:///data/data/org.nativescript.application/files/app/vendor.js, line: 18502, column: 29

StackTrace: 
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18502, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18554, column: 34
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 39201, column: 18
	Frame: function:'../node_modules/tns-core-modules/ui/frame/frame.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 40462, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55211, column: 13
	Frame: function:'../node_modules/tns-core-modules/utils/mainthread-helper.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55243, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils-common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55484, column: 27
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55710, column: 10
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 268, column: 13
	Frame: function:'../node_modules/nativescript-vue/dist/index.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 13906, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 693, column: 120
	Frame: function:'./main.ts', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 728, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'0', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 921, column: 18
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 45, column: 23
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 149, column: 18
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 152, column: 10
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 2, column: 1
	Frame: function:'require', file:'', line: 1, column: 266


TypeError: utils_1.mainThreadify is not a function
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18502, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18554, column: 34
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 39201, column: 18
	Frame: function:'../node_modules/tns-core-modules/ui/frame/frame.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 40462, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55211, column: 13
	Frame: function:'../node_modules/tns-core-modules/utils/mainthread-helper.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55243, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils-common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55484, column: 27
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55710, column: 10
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 268, column: 13
	Frame: function:'../node_modules/nativescript-vue/dist/index.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 13906, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 693, column: 120
	Frame: function:'./main.ts', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 728, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'0', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 921, column: 18
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 45, column: 23
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 149, column: 18
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 152, column: 10
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 2, column: 1
	Frame: function:'require', file:'', line: 1, column: 266


TypeError: utils_1.mainThreadify is not a function
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18502, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/debugger/devtools-elements.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 18554, column: 34
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 39201, column: 18
	Frame: function:'../node_modules/tns-core-modules/ui/frame/frame.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 40462, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55211, column: 13
	Frame: function:'../node_modules/tns-core-modules/utils/mainthread-helper.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55243, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils-common.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55484, column: 27
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'../node_modules/tns-core-modules/utils/utils.android.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 55710, column: 10
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 268, column: 13
	Frame: function:'../node_modules/nativescript-vue/dist/index.js', file:'file:///data/data/org.nativescript.application/files/app/vendor.js', line: 13906, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 693, column: 120
	Frame: function:'./main.ts', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 728, column: 30
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'0', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 921, column: 18
	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 76, column: 30
	Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 45, column: 23
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 149, column: 18
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/bundle.js', line: 152, column: 10
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 2, column: 1
Frame: function:'require', file:'', line: 1, column: 266
at com.tns.Runtime.runModule(Native Method)
at com.tns.Runtime.runModule(Runtime.java:624)
at com.tns.Runtime.run(Runtime.java:616)
at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1118)
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5791)
... 8 more

vue add vue-cli-plugin-nativesccript-vue BROKEN

ERROR ReferenceError: ejs:1

1| <%_ if (isVue3) { _%>
2| import { createApp } from 'vue'
3| import App from '~/App.vue';
4|

isVue3 is not defined

TypeError: Path must be a string. Received undefined

Trying to install via Vue-CLI 3.4.0 and version 0.2.1 of this plugin.

I've tried both via command line and also via vue ui, and get this error:

{"type":"warning","data":"../../../package.json: No license field"}
 ERROR  TypeError: Path must be a string. Received undefined
TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at Object.join (path.js:1233:7)
    at api.render (/Users/tomfilepp/work/FSU-Rebuild/games/node_modules/vue-cli-plugin-nativescript-vue/generator/index.js:221:14)
    at Generator.resolveFiles (/Users/tomfilepp/.nvm/versions/node/v8.15.0/lib/node_modules/@vue/cli/lib/Generator.js:202:13)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
{ Error: Command failed: vue invoke vue-cli-plugin-nativescript-vue --$inlineOptions {"applicationId":"org.fsu.adhd","historyMode":false,"isNewProject":true,"isNativeOnly":fal
se,"templateType":"nvw"}
adding to package.json
deleting from package.json
doing template rendering

🚀  Invoking generator for vue-cli-plugin-nativescript-vue...

    at makeError (/Users/tomfilepp/.nvm/versions/node/v8.15.0/lib/node_modules/@vue/cli/node_modules/execa/index.js:174:9)
    at Promise.all.then.arr (/Users/tomfilepp/.nvm/versions/node/v8.15.0/lib/node_modules/@vue/cli/node_modules/execa/index.js:278:16)
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:229:7)
  code: 1,
  stdout: 'adding to package.json\ndeleting from package.json\ndoing template rendering\n\n🚀  Invoking generator for vue-cli-plugin-nativescript-vue...\n',
  stderr: null,
  failed: true,
  signal: null,
  cmd: 'vue invoke vue-cli-plugin-nativescript-vue --$inlineOptions {"applicationId":"org.fsu.adhd","historyMode":false,"isNewProject":true,"isNativeOnly":false,"templateType":"nvw"}',
  timedOut: false,
  killed: false }

nsWebpack.getSourceMapFilename function not found on ver ^0.1.0

This error can happen for existing projects upgrading to ^0.1.0 from an earlier version.

Fix: manually upgrade the nativescript-dev-webpack dev dependency to at least 0.22.0.

not working with Nativescript 7.0.8

I created new project using 'vue create' and added this plugin.
But getting errors during the build. Seems this plugin is not compatible with nativescript7.

Please suggest any workaround.
My requirement is to use different env files for QA, Stage, Dev and Prod.
Do we have any other way to achieve this with Nativescript 7.

Webpack - vuetify

Hi all,

I've vuetify installed in my dual app.
There is any way to configure webpack to "not load" vuetify on the native env?

Thanks!

.eslintrc.js is overwritten on install

Think this didn't happen before, but even if it did - doesn't seem the best way to scrap the project's original .eslintrc. Perhaps we can append to it instead of writing over?

What about NativeScript 7

This plugin doesn't seem to work with NativeScript 7. Are there plans to update it?

fresh install - nothing's rendered on native

Hi,

I just did a fresh install by the plugin guide. Web part is working fine, but when running on Android - I get a blank screen with a package name (the one from package.json) and nothing more.

First of all, there's nothing in the code that I can see that renders the package name.
Second, the things that do need to be rendered - do not. I've added a <Label text="hello" /> inside the <GridLayout /> in the App.vue, but it renders empty (I see an empty <Label></Label> in debugger.

This behavior happens both on the emulator and on a real device (Nokia 6.1, Android One v10). I'm on Linux, so I can't confirm the same for iOS - Preview doesn't render anything at all, only the background (of which, btw, I can change color in app.css).

The sample nativescript-vue project works perfectly.

I'm totally new to {N}, so if there's something foolish and obvious I've missed - please, do tell.
Nativescript version 6.5.1 installed globally, and @vue/cli 4.5.6.

Error with vue add vue-cli-plugin-nativescript-vue

Hi guys, again,

Hope you are all well !

I have the following error while running vue add vue-cli-plugin-nativescript-vue, any way to solve that ?

% vue add vue-cli-plugin-nativescript-vue

📦  Installing vue-cli-plugin-nativescript-vue...

+ [email protected]
added 36 packages from 22 contributors in 51.848s

11 packages are looking for funding
  run `npm fund` for details

✔  Successfully installed plugin: vue-cli-plugin-nativescript-vue

? Enter a unique application identifier: org.nativescript.quizzTemplate
? Use HTML5 history mode? (Default: hash mode) No
? Is this a brand new project? (Default: Yes) No
? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web
? What type of template do you want to start with? (Default: Simple) Simple

🚀  Invoking generator for vue-cli-plugin-nativescript-vue...
 ERROR  TypeError: Cannot read property 'split' of undefined
TypeError: Cannot read property 'split' of undefined
    at module.exports (/Users/xxxxxxxx/go/src/github.com/eedama/quiz-for-kids.bck/node_modules/vue-cli-plugin-nativescript-vue/generator/index.js:41:62)
    at Generator.initPlugins (/Users/xxxxxxxx/.nvm/versions/node/v12.14.1/lib/node_modules/@vue/cli/lib/Generator.js:150:13)
    at Generator.generate (/Users/xxxxxxxx/.nvm/versions/node/v12.14.1/lib/node_modules/@vue/cli/lib/Generator.js:168:16)
    at runGenerator (/Users/xxxxxxxx/.nvm/versions/node/v12.14.1/lib/node_modules/@vue/cli/lib/invoke.js:109:19)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async invoke (/Users/xxxxxxxx/.nvm/versions/node/v12.14.1/lib/node_modules/@vue/cli/lib/invoke.js:90:3)

Thanks in advance

Cheers,
X

Webpack error when running preview:android after adding this plugin to an existing Laravel / Vue.js web app

I have an existing Laravel (6.x) / Vue.js (2.x) project into which I'd like to add nativescript-vue. I installed nativescript and ran tns doctor successfully. I installed the [vue-cli-plugin-nativescript-vue plugin][1], then copied the files from ns-example to the root directory of my project (including the src/ folder, .env.* files, babel.config.js, and nsconfig.json).

Now, when I try running npm run preview:android and scan the QR code on my android phone, I get the following messages and Webpack error:

Preparing project...
starting nativeConfig
Bundling application for entryPath .\main.native...
 WARN  A new version of sass-loader is available. Please upgrade for best experience.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.plugins[2] misses the property 'apply'.
   function
   -> The run point of the plugin, required method.

Any suggestions on what I did wrong?

Please update to match the current nativescript-vue (2.0.2)

It works with Vue Cli 4.0?

Same error than here: #2

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

But using vue cli 4.0.

Error: global.registerWebpackModules is not a function (Clean install)

I'm getting this error on a clean install and running npm run serve:ios

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x1011c9c4f NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10120bb05 -[TNSRuntime executeModule:referredBy:]
3   0x100c1efa3 main
4   0x10442d541 start
JavaScript stack trace:
1   @file:///app/vendor.js:57005:42
2   ../node_modules/tns-core-modules/utils/mainthread-helper.ios.js@file:///app/vendor.js:57025:34
3   __webpack_require__@file:///app/bundle.js:76:34
4   ../node_modules/tns-core-modules/utils/utils-common.js@file:///app/vendor.js:57266:46
5   __webpack_require__@file:///app/bundle.js:76:34
6   ../node_modules/tns-core-modules/utils/utils.ios.js@file:///app/vendor.js:57492:41
7   __webpack_require__@file:///app/bundle.js:76:34
8   @file:///app/vendor.js:128:32
9   ../node_modules/nativescript-vue/dist/index.js@file:///app/vendor.js:13766:34
10  __webpack_require__@file:///app/bundle.js:76:34
11  @file:///app/bundle.js:508:139
12  ./main.js@file:///app/bundle.js:531:34
13  __webpack_require__@file:///app/bundle.js:76:34
14  @file:///app/bundle.js:545:37
15  __webpack_require__@file:///app/bundle.js:76:34
16  checkDeferredModules@file:///app/bundle.js:45:42
17  @file:///app/bundle.js:149:38
18  anonymous@file:///app/bundle.js:150:12
19  evaluate@[native code]
20  mo<…>
JavaScript error:
file:///app/vendor.js:57005:42: JS ERROR TypeError: global.registerWebpackModules is not a function. (In 'global.registerWebpackModules(context)', 'global.registerWebpackModules' is undefined)
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: global.registerWebpackModules is not a function. (In 'global.registerWebpackModules(context)', 'global.registerWebpackModules' is undefined)
at
1   @file:///app/vendor.js:57005:42
2   ../node_modules/tns-core-modules/utils/mainthread-helper.ios.js@file:///app/vendor.js:57025:34
3   __webpack_require__@file:///app/bundle.js:76:34
4   ../node_modules/tns-core-modules/utils/utils-common.js@file:///app/vendor.js:57266:46
5   __webpack_require__@file:///app/bundle.js:76:34
6   ../node_modules/tns-core-modules/utils/utils.ios.js@file:///app/vendor.js:57492:41
7   __webpack_require__@file:///app/bundle.js:76:34
8   @file:///app/vendor.js:128:32
9   ../node_modules/nativescript-vue/dist/index.js@file:///app/vendor.js:13766:34
10  __webpack_require__@file:///app/bundle.js:76:34
11  @file:///app/bundle.js:508:139
12  ./main.js@file:///app/bundle.js:531:34
13  __webpack_require__@file:///app/bundle.js:76:34

Output from tns doctor

✔ Getting environment information

No issues were detected.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ Xcode is installed and is configured properly.
✔ xcodeproj is installed and is configured properly.
✔ CocoaPods are installed.
✔ CocoaPods update is not required.
✔ CocoaPods are configured properly.
✔ Your current CocoaPods version is newer than 1.0.0.
✔ Python installed and configured correctly.
✔ The Python 'six' package is found.
✔ Xcode version 10.2.1 satisfies minimum required version 9.
✔ Getting NativeScript components versions information...
✔ Component nativescript has 5.4.0 version and is up to date.
✔ Component tns-core-modules has 5.4.1 version and is up to date.
✔ Component tns-android has 5.4.0 version and is up to date.
✔ Component tns-ios has 5.4.0 version and is up to date.

Vue-cli add plugin error

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.

add to an existing nativescript project

Hi guys,

Hope you are all well !

Is there a way/tutorial to migrate an already existing project with vue-cli-plugin-nativescript-vue to get the web preview ?

Cheers,
X

Plugin does not read `appPath` nor `appResourcesPath` from the `nsconfig.json` file

As we can see in the plugin index.js file (lines 156-157 and 960-964):

// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file
// when bundling with `tns run android|ios --bundle`.
appPath = isNativeOnly === true ? 'app' : 'src',
appResourcesPath = join(appPath, 'App_Resources'),

// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file
// when bundling with `tns run android|ios --bundle`.
appPath = 'src',
appResourcesPath = join(appPath, 'App_Resources'),

appPath and appResourcesPath are not read from the nsconfig.json file.

So it is impossible to customize these variables.

Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

Hi. The CLI is unable to invoke the vue-cli-plugin-nativescript-vue

I just keep getting this error. Help, please. 🙏🏻
I have tried alternating every option
It's a fresh project. I don't really know what to do at this point.
I followed every single step on the version 2 docs

Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

Am using Vue 3 with Typescript.

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

I was previously able to install this plugin properly, just a few days ago and have everything running. But I keep running into this issue when I try again for a new nativescript vue project.

Error messages look similar for previous issues posted. But references different files here.

.

The dashboard and plugins tabs are gone now, so I cannot even do it from vue UI

Here on a successfully working install previously

is babel dependency required?

Hi,

I was trying to create a vue+typescript+nativescript web+native project combo.

I run vue create dao-ts first, uncheck babel/linter, check typescript, kept all following default settings. So this is a purely typescript vue project with dependencies below:

  "dependencies": {
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  }

Then I run vue add vue-cli-plugin-nativescript-vue with all default settings, then run tns migrate, then I run 'npm run serve:android' but got this error:

ERROR in ./components/HelloWorld.vue?vue&type=script&lang=ts& (../node_modules/ts-loader??ref--10-0!../node_modules/vue-loader/lib??vue-loader-options!../node_modules/string-replace-loader??ref--13-1!./components/HelloWorld.vue?vue&type=script&lang=ts&)
Module not found: Error: Can't resolve 'babel-loader' in 'D:\Projects\dao-ts\src'
 @ ./components/HelloWorld.vue?vue&type=script&lang=ts& (../node_modules/ts-loader??ref--10-0!../node_modules/vue-loader/lib??vue-loader-options!../node_modules/string-replace-loader??ref--13-1!./components/HelloWorld.vue?vue&type=script&lang=ts&) 2:0-62 9:8-12 12:8-17 17:2-5
 @ ./components/HelloWorld.vue?vue&type=script&lang=ts&
 @ ./components/HelloWorld.vue
 @ ../node_modules/ts-loader??ref--10-0!../node_modules/vue-loader/lib??vue-loader-options!../node_modules/string-replace-loader??ref--13-1!./App.vue?vue&type=script&lang=ts&
 @ ./App.vue?vue&type=script&lang=ts&
 @ ./App.vue
 @ ./main.native.ts
 @ multi ./main.native

it seems that babel-loader is required, but I guess when I created the vue web project, it's sure to be able to run without babel.

Typescript webpack error when vue cli typescript plugin is in dependencies in package.json

Repo to reproduce

I was trying to use this plugin on my existing Vue project, which is using Vue CLI 4.

I got this error after setting it up selecting existing project and dual web and native.

npm run serve:web

> [email protected] serve:web /Users/auroretrunelle/projects/ns-ts-test
> vue-cli-service serve --mode development.web

starting webConfig
 INFO  Starting development server...
 ERROR  TypeError: Cannot read property 'get' of undefined
TypeError: Cannot read property 'get' of undefined
    at api.chainWebpack (/Users/auroretrunelle/projects/ns-ts-test/node_modules/vue-cli-plugin-nativescript-vue/index.js:1180:9)
    at webpackChainFns.forEach.fn (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/Service.js:236:40)
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/Service.js:236:26)
    at Service.resolveWebpackConfig (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
    at serve (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/commands/serve.js:74:31)
    at Service.run (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/lib/Service.js:230:12)
    at Object.<anonymous> (/Users/auroretrunelle/projects/ns-ts-test/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
    at internal/main/run_main_module.js:21:11

I tried setting up a brand new project with TypeScript with the Vue CLI 4 and this plugin as well, and it worked fine in that case.

I manage to nail it down to the fact that my @vue/cli-plugin-typescript in my package.json was in my dependencies rather than devDependencies (as it is for a branch new project).

Our sysadmin installs our packages using npm install --production for production deploy, and build projects just after, which is why I have that Vue CLI plugins as part of dependencies.

I don't think this should result in an error though. Can you investigate?

Let me know if you need more info.

Integration with Vite

Now that more and more vite is being used, is integration possible?