Importing result from <script> into <script setup>

Question

I’m trying to enumerate the instances of a Vue component in order to ensure unique ids, and for that use a simple generator. Normally I would initiate the generator outside of the setup function:

const idGen = generateIds("component:my-component");

export default {
  setup() {
    const id = idGen.next().value;

    return {
      id,  // e.g. "component:my-component/0042"
    };
  },
};

However with the <script setup> sugar I’m not exactly sure how this is done. I know I can run side-effect in another <script> block which will only be executed once:

<script>
const idGen = generateIds("component:my-component");
</script>

However I don’t know I to access the shared idGen in my <script setup> to increment the enumerator and get the unique id.

<script setup>
// Where do I get idGen from the above <script>?
const id = idGen.next().value;
</script>

The only way I can think of to do this while using the <script setup> sugar is to initiate the generator in a separate file:

<script setup>
import { idGen } from "./id-generator.js";

const id = idGen.next().value;
</script>

The only problem is that it is a bit annoying to create a separate file just for this tiny logic which very much belongs with the component, so I would avoid it if I could.

if <script> is above <script setup> then idGen should be available in <script setup> — Bravo
– Bravo, Commented Jun 4, 2022 at 3:49
Added an answer - I think this may trip up others that start using <script setup> — Bravo
– Bravo, Commented Jun 4, 2022 at 4:12
Could possibly be solved in more idiomatic way by making generateIds a composable that keeps global state in a weak map. — Estus Flask
– Estus Flask, Commented Jun 4, 2022 at 6:23
This is the reason I consider script setup syntax faulty by design. It's DSL and not proper JS. And it's supposed to make things simpler in 90% cases, but you don't know beforehand when 10% will make them complex, and refactoring back to script may be tedious. — Estus Flask
– Estus Flask, Commented Jun 4, 2022 at 6:29

Bravo · Accepted Answer · 2022-06-04 07:30:51Z

2

Edit: turns out the order is irrelevant after all

any <script> will run as normal

the code inside <script setup> is converted/compiled to a composition API "setup" function, and when that is called, all the top-level code in other <script> will have already executed, therefore idGen will already be available

so

Ignore the rest of this answer

~~Most vue3 <script setup> examples that use another <script> always show the order~~

<script setup></script> <script></script>

In your case, this won't work.

However, if the scripts are in this order

<script> const idGen = generateIds("component:my-component"); </script>

then

<script setup> const id = idGen.next().value; </script>

then idGen will be available inside the <script setup>

~~Note: you can have as many <script> tags in your SFC as you want, in any order, but only one <script setup>~~

edited Jun 4, 2022 at 7:30

answered Jun 4, 2022 at 4:11

Bravo

6,3271 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Estus Flask Over a year ago

Not really. Vue SFC is a made-up syntax, so is script setup. It may work the way you describe, but it's not because things work like that in a browser

Bravo Over a year ago

OK - well, this answer is actually wrong ... I assumed the OP had an issue with defining idGen in <script> perhaps because script was after script setup ... turns out, the order is irrelevant ... it works, because idGen is global, and the code in script setup runs when the component is created which will always be after non setup <script> is executed - please unaccept the answer so I can delete this misinformation

Collectives™ on Stack Overflow

Importing result from <script> into <script setup>

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related