Vue-class-component: runtime-only build error (while using with Nativescript-Vue

[championswimmer]

I was trying to use Nativescript-Vue with vue class style components

Here is my file - pretty standard and simple

<template>
  <StackLayout xmlns="http://schemas.nativescript.org/tns.xsd">
    <Label :text="message"></Label>
    <TextView v-model="message"></TextView>
  </StackLayout>

</template>
<script>
  import Vue from 'vue'
  import Component from 'vue-class-component'
  @Component
  export default class Home extends Vue {
    message = "HOME IS HERE"
  }
</script>

I keep encountering this error "You are using the runtime-only build of Vue where the template compiler is not available."

I am confused, because in my entire project I have only used sfc. So there are no string templates anywhere.

[championswimmer]

Here is my tsconfig

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "lib": [
      "dom", "es2015"
    ],
    "importHelpers": true,
    "noEmitHelpers": true,
    "noImplicitThis": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "typeRoots": [
      "types"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "esModuleInterop": true,
  "compileOnSave": false,
  "exclude": [
    "node_modules",
    "dist",
    "template"
  ]
}

[ktsn]

Could you provide a reproduction?

[championswimmer]

Mentioning @tralves here as he as done a lot of webpack work on Nativescript-Vue

And yes, will upload the reproduction ASAP

[championswimmer]

@ktsn
Here you go https://github.com/championswimmer/hasgeek_mobile_nsvue

Typescript works with .ts files (master is buildable)
If you convert any of the .vue files to @Component it fails

[championswimmer]

If I add this to Events.vue

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator'
    @Component({name: 'Events'})
    export default class Events extends Vue {

    }
</script>

CONSOLE ERROR file:///app/app.js:14093:20: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Events> at src/components/pages/Events.vue
<App> at src/App.vue
<Root>

[ktsn]

How can I run the reproduction? I just run watch:ios / watch:android command but it looks not work 😕

[championswimmer]

OHHH SHUCKS! Sorry I fixed it. I am so sorry I forgot closing the issue.

This is the fix https://github.com/nativescript-vue/nativescript-vue/issues/211

EXPLANATION: For anyone who came here following my error
This was a nativescript-vue specific error. NS Vue uses it's own render function generator. So we have to import Vue from nativescript-vue and never from vue directly.

[ktsn]

Oh! happy to hear that 😄

[michaeljota]

For those who end up here playing around with Vuido, you need to set an alias for Vue to Vuido.

If using webpack directly:

    resolve: {
      extensions: [ '.js', '.vue', '.json' ],
      alias: {
        vue: 'vuido' // This line
      }
    },

If you want to use @vue/cli I'm still working on that, but you need a vue.config.js file.