Getting Error "Unknown Custom Element"

adeel41 commented 6 years ago

I am trying to create a very simple component but keep getting this error. I understand this error is returned by Vue and and not Vuedart but I think the problem is it is not including the add-location component I am pasting everything which I've written so far. Any help is much appreciated

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

(found in <Root>)

main.dart

import 'dart:async';
import 'package:vue2/vue.dart';
import 'package:alot/src/components/add_location.dart';

@VueApp(el: '#app')
class App extends VueAppBase {
  factory App() => VueAppBase.create((context) => new App._(context));
  App._(context): super(context);
}

App app;

Future main() async {
  await initVue();
  app = new App();
}

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>dart_web</title>
    <script src="https://unpkg.com/vue"></script>
    <script defer src="main.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>
</head>

<body vuedart>
<div id="app">
    <add-location></add-location>
</div>
</body>
</html>

add_location.dart

import 'package:vue2/vue.dart';

@VueComponent(name: 'add-location', template: 'Hello There')
class AddLocationComponent extends VueComponentBase {
  AddLocationComponent(context): super(context);
}

pubspec.yaml

name: alot
description: Web interface to work with alot
version: 0.0.1

environment:
  sdk: '>=1.20.1 <2.0.0'

dependencies:
  js: "0.6.1"
  vue2: any

dev_dependencies:
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1

transformers:
  - vue2:
      entry_points:
          - web/index.dart
  - $dart2js
  - dart_to_js_script_rewriter

# Uncomment the following in sdk 1.24+ to make pub serve
# use dartdevc (webdev.dartlang.org/tools/dartdevc).
#web:
compiler:
  debug: dartdevc

And the following files are after running the transformer in debug mode

main.dart

import 'dart:html' as html;
import 'dart:async';
import 'package:vue2/vue.dart';
import 'package:alot/src/components/add_location.dart';

@VueApp(el: '#app')
class App extends VueAppBase {
  factory App() => VueAppBase.create((context) => new App._(context));
  App._(context): super(context);
@override
VueAppConstructor get constructor => new VueAppConstructor(
  el: '#app',
  data: {},
  computed: {},
  watchers: {},
  methods: {},

);
      }

App app;

Future main() async {
  await initVue();
  app = new App();
}

@initMethod
void vuedart_INTERNAL_init() {

}

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>dart_web</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script src="https://unpkg.com/vue"></script>
    <script defer src="main.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>
</head>

<body >
<div id="app">
    <add-location></add-location>
</div>
</body>
</html>

add_location.dart

//part of alot.components;

import 'dart:html' as html;
import 'package:vue2/vue.dart';

@VueComponent(name: 'add-location', template: 'Hello There')
class AddLocationComponent extends VueComponentBase {
  AddLocationComponent(context): super(context);
static VueComponentConstructor constructor = new VueComponentConstructor(
  name: 'add-location',
  creator: (context) => new AddLocationComponent(context),
  template: r"""Hello There""",
  styleInject: r"""""",
  props: {},
  mixins: [],
  data: {},
  computed: {},
  watchers: {},
  methods: {},

);
      }@initMethod
void vuedart_INTERNAL_init() {
  VueComponentBase.register(#AddLocationComponent, AddLocationComponent.constructor);
}

refi64 commented 6 years ago

@adeel41 So, in this part of your pubspec:

  - vue2:
      entry_points:
          - web/index.dart

entry_points is defining your main files; this is needed for components to be automatically globally registered.

In your example, it seems you've named your main file main.dart, so that needs to be changed to:

  - vue2:
      entry_points:
          - web/main.dart  # <-- index.dart changed to main.dart

This is mentioned in the documentation:

TL;DR: all your Dart files that define main and also setup a Vue app should be in entry_points.

but now that I look at it again, I don't think I explained this well enough...this has even happened to me enough times that I should make it a bit more obvious, and probably add an FAQ entry or something...

adeel41 commented 6 years ago

Thanks that fixed my problem. I guess I didn't realized it because I use Webstorm editor and pick Bare-bones Web App template to generate the application which always generates a main.dart file.

And then I copied transformer stuff from your example without giving it a second thought that why it is needed.

Anyways thanks and sorry for late reply

refi64 commented 6 years ago

FWIW I'm going to leave this open for a bit until I fix the docs since I'll end up forgetting otherwise.

refi64 / vuedart

Getting Error "Unknown Custom Element" #10