jaredmcateer / ngvue3 Goto Github PK

Hello, I have a small problem.

I have a component that is registered globally in a file ngVue.js where all core initialize. Inside this component I want to use another component which is also registered in the same ngVue file. I also tried to import it inside the component, but nothing worked. The console gives an error.
[Vue warn]: Failed to resolve component: component-name. If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Looks like it doesn't see the registered component at all. Am I doing something wrong, or is this not implemented?

Also, along with this error, another one appears regarding props, since, of course, I’m trying to use them in a non-existent component.
[Vue warn]: Failed to resolve directive: props-size

What could I be doing wrong, and how can I solve this?

Any tips how I can make angular.js services state reactive with Vue 3 computed property?

My service Slip:

import {
   ...
}

define(['angular'], function () {

  function SlipModel() {
      const Slip = {
          addedEvents: {},
          sliplineAdded(bet) {
                if (!Slip.addedEvents[bet.eventUUID][`${bet.market}|${bet.selection}`]) {   
                    Object.assign(Slip.addedEvents[bet.eventUUID], { [`${bet.market}|${bet.selection}`]: true })
                }
            }
      }
      
      return Slip;
  }

  return SlipModel;

})

This is how I register and export angular.js service:

import ng from 'angular'
import SlipModel from './slipModel'

export let Slip;

ng.module('app.slip', [])
    .factory('Slip', SlipModel)
    .run(/* @ngInject */ function($injector) {
	Slip = $injector.get('Slip')
});

In the Vue 3 component I import it:

import { Slip } from '../../slip/module';
Use it in computed value addedSelection:

computed: {
    addedSelection() {
      return Slip.addedEvents[this.kenoSchedule[0].eventUUID]
    },
  }

The main issue that I'm having is that it's not reactive in Vue 3 computed property, but in Vue 3 HTML template it actually is reactive - if service state changes, I can see those changes in HTML.

I tried to use reactive, toRef, register Slip service as plugin, but the computed value addedSelection just wont update after Slip.addedEvents has a new element pushed/removed.

When going to import ngVue3 directly with a "script" tag into HTML file without using "module" type, i've been running into an issue with this:

What can i do to directly include it?

This appears to be an existing issue ported over from the original ngVue. Not sure if it is worth fixing.

This appears to be a bug that has existed in the original ngVue as well. I am not 100% sure if I am going to bother trying to fix it as it is a use case we've never needed in our code base. The scope.$watch never fires when ng-style changes

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

Hi Jared,
Could you please consider setting a default jsDelivr CDN file set?

Thank you very much in advance!

If you pass a complex object as a prop from angular to vue updates to the objects properties in Angular are not reflected in Vue, but if you change the property in vue the change will be reflected in both.

Hi,

Firstly, I would just like to say that I am very appreciative of this library, it has enabled me to upgrade very smoothly from Vue 2 to Vue 3.

I have found a issue when trying to register a plugin that has a second options argument.

Vue's app.use function (interface App<HostElement = any>) has some overloads for passing options.

use<Options extends unknown[]>(plugin: Plugin<Options>, ...options: Options): this;

use<Options>(plugin: Plugin<Options>, options: Options): this;

However, I can't see how to do this in ngVue3 as there is only 1 argument for the use function. For example with PrimeVue:

$ngVueProvider.use(PrimeVue, { unstyled: true }); // Doesn't work

Yay for old legacy CSS that over=-used !important.

I want to mount a component from a vue library into the ShadowDOM so that the host angular app can't rub its grubby !important rules all over the styles provided by the component library (loaded from a separate CSS file).

I noticed issue in the original ngvue project as well: ngVue/ngVue#145

Given you're busy, I'm not expecting you to implement anything, but I am curious to hear your thoughts on a clean way to do this with nvgue3. A plugin perhaps? Extra options in the directive? Some other approach?

I have a rather special case, but i hope you can help me.

I built an WYSIWG editor with bootstrap components and i am currently porting the HTML result (frontend-user's view) to vue components.

To understand the problem i have a compile-html directive in angular and now as a vue component:

AngularJS:

/**
 * Used to make uib-accordion work inside ng-bind-html
 */
export default function compileHtml($compile) {
  return {
    restrict: 'AE',
    link: function (scope, element, attr) {
      attr.$observe('ngBindHtml',function(){
        if(attr.ngBindHtml){
          $compile(element[0].children)(scope);
        }
      });
    }
  };
};

Vue3:

<script>
// IMPORTANT: you must import `compile` from this file! Standard Vue builds won't work
import { compile } from 'vue/dist/vue.esm-bundler.js'

export default {
  props: {
    html: String,
  },
  setup(props) {
    // convert to BootstrapVueNext
    return compile(props.html.replace(/uib-accordion/g, 'b-accordion')
      .replace(/div b-accordion-group=""/g, 'b-accordion-item class="card"')
      .replace(/<\/div><\/b-accordion/g, '</b-accordion-item></b-accordion')
      .replace(/<b-accordion-heading/g, '<template #title')
      .replace(/b-accordion-heading/g, 'template')
      .replace(/is-open="isOpen"/g, ':title="$t(\'courses.open.reveal\')"')
      .replace(/uib-tabset/g, 'b-tabs')
      .replace(/uib-tab/g, 'b-tab')
      .replace(/<b-tab-heading/g, '<template #title')
      .replace(/b-tab-heading/g, 'template')
      .replace(/uib-popover-html/g, 'v-b-popover.click.blur.html')
      .replace(/viewbox/g, 'viewBox')) // fix SVGs viewbox
  },
}
</script>

The bootrap components do work because i use $ngVueProvider.use(BootstrapVueNext); and $ngVueProvider.directive('bPopover', vBPopover);. The problem now is, i have some custom components that also need to be compiled and that does not work because i cannot tell ngVueProvider to have a global component.

Adding

$ngVueProvider.component('videojs', Videojs); // need this for compileHtml.vue

would solve my problem, because that works in a standalone Vue app. But unfortunately i get the following error: $ngVueProvider.component is not a function

Hello, i would like to connect the i18n translations to the ngVue. Tried a lot of examples, searching inside the main files. I saw that you did plugins functionality, but can you please explain how to use it, and connect for example i18n?

Hello,
My AngularJs application is internationalised, so I'm trying to include 'vue-i18n' via NgVueProvider but without success.

Can you please help me?
Thanks

Consider a component that supports v-model usage. It needs to provide two things for the syntactic sugar to work. A modelValue prop, and an update:modelValue event.

What I can't work out, is how to get the event binding working so that the update:modelValue event can be listened to in Angular. I think the colon in the event name is making a mess of things and I had a look at the ngvue source code, but I can't see where I'd potentially update things to fix it.

It's pretty easy to replicate this by changing the example applications to emit an update:description event instead of an update-description event. You'll see the vue devtools no longer showing the event binding

I have directly import the "angularjs" with script tag inside HTML. I have the legacy application based on AngularJS, and when i import ngVue3 with "import" statement - i got an warning, that i have tried to import AngularJS twice.

I think, that you have import statement inside your module, isn't it? Is it a problem to trying loading AngularJS twice? Will it call some issues?

If yes, i would like to know, how to import your module with another way?