How do I name components in VueDart 0.4?

[tjma2001]

lib/home.dart

import 'package:vue/vue.dart';
import 'package:vue/plugins/vue_router.dart';

import 'package:myapp/header.dart';

@VueComponent(
  template: '<<', 
  components: [])
class Home extends VueComponentBase {

}

lib/header.dart

import 'package:vue/vue.dart';

@VueComponent(template: '<div>menu will go here</div>')
class HeaderComponent extends VueComponentBase {
  HeaderComponent() {
  }
}

I get the following error in my browser

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

found in

--->

Then I update home.dart

`@VueComponent( template: '<<', components: [HeaderComponent]) class Home extends VueComponentBase {

}`

Then I get the following error

Please let me know ifyou need more information. I have tried to get this working with multiple versions of dart.

[refi64]

The second piece of code should be correct... Can you copy-paste the full error message inside Symbol(_error)?

Also, kudos to you for daring to try 0.4 before the docs have been updated. 👍

[tjma2001]

Error
    at Object.dart.throw (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:4835:29)
    at Object.dart.defaultNoSuchMethod (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:4928:15)
    at Object.dart.noSuchMethod (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:4923:27)
    at Object.dart.dload (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:4523:17)
    at vue$.mapToJs.MapOfString$dynamic.fromIterable.key.dart.fn.component (http://localhost:8080/packages/vue/vue.ddc.js:827:125)
    at Function._fillMapWithMappedIterable (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:12178:22)
    at Function.fromIterable (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:31314:28)
    at Function.fromIterable (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:41886:37)
    at Function.componentsMap (http://localhost:8080/packages/vue/vue.ddc.js:827:49)
    at vue$.mapToJs (http://localhost:8080/packages/vue/vue.ddc.js:813:227)
    at home$46template.Home.new.componentArgs (http://localhost:8080/packages/vue/vue.ddc.js:816:9)
    at VueRoute.new.jsargs (http://localhost:8080/packages/vue/plugins/vue_router.ddc.js:199:47)
    at MappedListIterable.new.routes.(anonymous function).dart.fn.route (http://localhost:8080/packages/vue/plugins/vue_router.ddc.js:334:70)
    at MappedListIterable.new.elementAt (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:13024:24)
    at MappedListIterable.new.toList (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:12629:33)
    at new plugins__vue_router.VueRouter.new (http://localhost:8080/packages/vue/plugins/vue_router.ddc.js:334:128)
    at main (http://localhost:8080/index.template.ddc.js:52:20)
    at main.next (<anonymous>)
    at runBody (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:23404:34)
    at Object.async.async (http://localhost:8080/packages/$sdk/dev_compiler/amd/dart_sdk.js:23431:7)
    at Object.index$46template.main (http://localhost:8080/index.template.ddc.js:51:18)
    at http://localhost:8080/index.template.dart.bootstrap.js:168:24
    at Object.execCb (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1696:33)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:878:55)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.<anonymous> (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1139:34)
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:134:23
    at http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1189:21
    at each (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:59:31)
    at Module.emit (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1188:17)
    at Module.check (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:938:30)
    at Module.enable (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1176:22)
    at Module.init (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:788:26)
    at callGetModule (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1203:63)
    at Object.completeLoad (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1590:21)
    at HTMLScriptElement.onScriptLoad (http://localhost:8080/packages/$sdk/dev_compiler/amd/require.js:1717:29)

[tjma2001]

As far as I can see, when header is imported by something in the lib folder, header.dart and header.ddc.js get "generated/pulled" into the browser.

When header is imported by index.dart then it pulls in header.template.dart and header.template.ddc.js. The source in these files look more reasonable as they have the following block of code (and lots more):

header$46template.HeaderComponent = class HeaderComponent extends vue$.VueComponentBase {
    get _constructor() {
      return new vue$.VueComponentConstructor.new({name: "HeaderComponent", creator: dart.fn(() => new header$46template.HeaderComponent.new(), VoidToHeaderComponent()), template: "<div>headercomponent</div>", styleInject: "", model: null, props: new (IdentityMapOfString$VueProp()).new(), data: new (IdentityMapOfString$Object()).new(), computed: new (IdentityMapOfString$VueComputed()).new(), watchers: new (IdentityMapOfString$VueWatcher()).new(), methods: new (IdentityMapOfString$Function()).new(), components: JSArrayOfVueComponentBase().of([]), mixins: JSArrayOfVueComponentBase().of([])});
    }
  };

I tried looking through builders.dart but I don't understand the build process well enough yet.

[refi64]

AH yes, this is a weird thing I'm trying to still work on. Right now, if you're importing a file containing VueDart annotations from inside the same package, you need to import file.template.dart instead of just file.dart. If you import it from outside, you don't actually need that due to some magic (that I might remove, because it's kind of inconsistent and always trips me up).

[tjma2001]

Sick. it seems to be working :-)

[tjma2001]

This strategy does not seem to be working for files in subfolders in lib though.

[refi64]

This is all fixed now, and 0.4 has been released with updated docs.