jaredmcateer / ngvue3 Goto Github PK
View Code? Open in Web Editor NEWUse Vue 3 components in your Angular 1.x app
Home Page: https://jaredmcateer.github.io/ngVue3/
License: MIT License
Use Vue 3 components in your Angular 1.x app
Home Page: https://jaredmcateer.github.io/ngVue3/
License: MIT License
This appears to be an existing issue ported over from the original ngVue. Not sure if it is worth fixing.
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
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!
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
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?
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
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.
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.
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?
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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.