We Keep Coding

Vue CLI plugin passing dynamic JS variables into props

I'm using version 4.5 of the Vue CLI plugin and have built a component that accepts a title as a prop. I've then built my component into a web component and have included it into my HTML web page (that isn't a Vue JS project)
I'm trying to now update the props of my component in my HTML & JS project dynamically, and initially thought I could use a JS data attribute and update the data attribute prop as this would work, along with a watcher in my component, but this didn't update with the new dynamic value.
I've read a little online, and have implemented a suggestion, but can't seem to get my component to update with the JS variable, what am I doing wrong or what's the workaround?
<script>
var creditModalPluginTitle = 'Foo Bar'
</script>
<div style="margin-bottom:10em;">
<vue-les-creditreport :title="creditModalPluginTitle"></vue-les-creditreport>
</div>
Inside of my Credit Report plugin I'm outputting title but it's not updating with the value from creditModalPluginTitle.
I can't be the only person with this problem.

The markup shown looks like it's intended for the non Vue page, where you included your Vue component (vue-les-creditreport). This markup uses Vue syntax for data binding (i.e., the v-bind directive in :title="creditModalPluginTitle"), but that only works within Vue templates.
You would need to set the component's title property using vanilla JavaScript:
<div style="margin-bottom:10em;">
<vue-les-creditreport id="myElem"></vue-les-creditreport>
</div>
<script>
document.getElementById('myElem').title = creditModalPluginTitle
</script>

How to make component tags start with a prefix in Vue?

I am working on a project that I inherited from someone else, and I see a lot of <p-xxxx> tags, such as <p-page :has-something="val1" :has-another="val2" />, etc.(e.g. CompName -->
I'm looking around the directories and found a component called Page.vue that has such props in it: has-something and has-another. And structurally speaking, I'm sure the <p-page> corresponds to this component.
So how did this work? I checked the component's name field and it says Page.
EDIT:
I should also note that the component isn't registered at all. It's not imported either. I'm guessing it has something to do with
import '#/globals';
import '#/plugins';
in main.js, because I know we're using our proprietary UI component library. Can anyone point to where I can go read more about how this works? I thought I was pretty good at Vue, but apparently not good enough.

It depends on how the component is registered in the parent component, for instance, if the Page component is registered as:
components: {
PPage: Page
}
Then in the template, you'll refer to this component as <p-page ...

I figured it out.
In our proprietary library we're using, components were being exported out with p- as a prefix, and the library was injected into the whole app via vue.config.js, so there wasn't any importing in individual components.

Vue.js set data in other component without event

Currently I'm using Laravel Nova. Behind the scenes it's using vue.js. I've made a custom vue component that need's to change data within another component.
That other component lives in the node_modules directory so I can't change the component code. The component is not using events so I can't change the data with that.
I was wondering is it possible to change data within another component without using events?

I don't know the code of the component where you want to set the data.
But if it has a ref you can do something like:
updateData: function() {
this.$refs.xyComponent.clicked = true
}
Notice that the $refs are only populated after the render process.

Can't create new vue components

For some reason I can't register new components. I got a few of them and when I try to register new one I get:
Unknown custom element: <store> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
This is my app.js file:
Vue.component('example', require('./components/Example.vue'));
Vue.component('register', require('./components/Register.vue'));
Vue.component('loginmodal', require('./components/LoginModal.vue'));
Vue.component('products', require('./components/Products.vue'));
Vue.component('store', require('./components/Store.vue'));
And Store.vue is basically duplicated Example.vue so no point in posting that. I tried using already created components on page like register for example and it works just fine for some reason. You should also know that I'm using Laravel where Vue is pre-included and already set up by default with example component already created.

Here is my guess: you are using the component store in one of the other components listed above before registering it globally.
This could probably be adressed by changing your registering order, but I would advise you to register them locally to each component instead.
See: https://v2.vuejs.org/v2/guide/single-file-components.html

Override ember component template with template from addon (in-repo)

I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!

You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.