0

I'm new to Vue 3 and I just created my first real life Vue project.

I would like to use and distribute this component (and it's subcomponents) to be used in any html page.

It's easy, right?

<div id="app"></div>
<script src="/js/chunk-vendors.99a5942c.js"></script>
<script src="/js/app.042d60b5.js"></script>

But how can I pass parameters to the main component when reusing it in some ordinary html page?

Ricardo Martins
  • 5,702
  • 3
  • 40
  • 59

2 Answers2

0

Parameters can be passed and read as globals:

<div id="app"></div>
<script>
window.myNamespace = { foo: 1 };
</script>
...

Or be passed as attributes and read from app element:

<div id="app" data-foo="1"></div>
...

This is suitable when Vue application is used as a sub-application (widget). For framework-agnostic reusable components, web components have to be used.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
0

So I'm not sure what you're specific use case is, but if you're interested in making a multi-page app (MPA), then I suggest taking a look at the answer posted here.

What you would be doing here is actually mounting an instance of the Vue App itself onto an element every html page, and then pass props to that and it's children. Vue itself doesn't really support passing props to the root instance using element attributes, and it isn't the recommended way of using the framework, but if you are still interested in going down this route, I suggest taking a look at this answer here.

What I would suggest doing instead is taking a look at creating components, and passing those around. You can make separate files for each, and render them all in the main page, no need to create other pages. If that's something you're interested in, I suggest taking a look at routes or the making your project a multi-page app (MPA) instead of a single-page app (SPA) although the same concept would still apply, passing components to your main instance and building your app that way.

For passing parameters to components in Vue 3 I would suggest taking a look at the props page on the documentation here for more details.

I hope this is helpful! I tried my best to be thorough, I do suggest reading through the full documentation however!

Aoife
  • 1
  • 2
  • Thanks for replying @Aoife. Sorry for not making that clearer. It's not a MPA with multiple routes. It's just a single payment box I would like to reuse in different websites. However, each website that will use this component would have different merchant accounts that I need to pass inside the vue application/component. – Ricardo Martins Aug 06 '21 at 23:42