Kevin Powell - Community•6mo ago

Problems in vue3

Good day. I'm having some problems with vite and vue3, especially working through "configuration". I couldn’t find anything on YouTube about this, can you give me some tips and advice on where and how to get good knowledge of vue3 and work with the “setup”. I'm having problems. There is a problem with custom elements in vite.config.js, each element requires inclusion in an exception, is there an alternative to this? How is configuration done in Uinput.vue, how do you understand when and what needs to be added? There is such a company in the global.js file, it seems to me that this is some kind of crutch, please tell me whether I am right about this or not Thank you for attention. https://codepen.io/Mister-Eighth/pen/RwdVbjm

Mister-Eighth

CodePen

RwdVbjm

...

19 Replies

Eighth•6mo ago

Just like you said @Rägnar O'ock

Rägnar O'ock•6mo ago

I'll look at it when I'm back home this evening

Eighth•6mo ago

Thank you, I'll wait as long as necessary

Rägnar O'ock•6mo ago

just to be sure I understand : you are building a library of Vue3 components and want to have them all installed globally when you do Vue.use(myLib) ?

Eighth•6mo ago

Yes, the idea is for all elements to be collected in one file and imported from it into another

Rägnar O'ock•6mo ago

and the components/apps that will use the component of your lib are in another package/project ?

Eighth•6mo ago

They are in the same place, just in a different application

Eighth•6mo ago

Thus

Rägnar O'ock•6mo ago

oh! so you are not building a lib, just referencing your components globally in you app ? why don't you just import them where you need them? like :

# App.js
<script setup>
  import UButton from './components/UButton.vue';
</script>

<template>
  <p>Hello World</p>
  <UButton>click me<UButton>
</template>

# App.js
<script setup>
  import UButton from './components/UButton.vue';
</script>

<template>
  <p>Hello World</p>
  <UButton>click me<UButton>
</template>

this way all you need in your config is :

import vue from 'vue-vite-plugin'; // not sure on the name of the package

export default defineConfig({
  entry: 'main.js',
  plugins: [vue()],
  resolve:{
    alias:{
      '...':path.resolve(__dirname,'src')
    }
  }
})

import vue from 'vue-vite-plugin'; // not sure on the name of the package

export default defineConfig({
  entry: 'main.js',
  plugins: [vue()],
  resolve:{
    alias:{
      '...':path.resolve(__dirname,'src')
    }
  }
})

and the classique main.js :

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Eighth•6mo ago

I create them globally, so that if there are a large number of components, I don’t have to enter them manually in each file, but immediately refer to the component

Rägnar O'ock•6mo ago

and if you really want your components to be available everywhere you can use : https://vuejs.org/guide/components/registration.html#global-registration

Vue.js

Vue.js - The Progressive JavaScript Framework

Rägnar O'ock•6mo ago

it's unlikely you have "too many" components in a component and it's better to be explicit about the components you use in any given components. It makes it easier to maintain the app because if you end up with 2 components that are almost the same but not quite it's hard to know witch one is witch from the doc :

While convenient, global registration has a few drawbacks: Global registration prevents build systems from removing unused components (a.k.a "tree-shaking"). If you globally register a component but end up not using it anywhere in your app, it will still be included in the final bundle. Global registration makes dependency relationships less explicit in large applications. It makes it difficult to locate a child component's implementation from a parent component using it. This can affect long-term maintainability similar to using too many global variables.

(and you IDE imports them automatically for you anyway) (and and in a <script setup> you only have to import it to use it, not like in the OptionAPI where you need to import them and reference them in the components prop of the component)

Eighth•6mo ago

I also wanted to know, I noticed that, unlike vue2, in vue3 the elements seem to be in a shell and this makes it difficult to access them during some operations, for example you have to iterate over the element and access the first part of the element by index, it turns out like a crutch

Rägnar O'ock•6mo ago

I'm not sure I get what you are talking about maybe an example would help

Eighth•6mo ago

I'll try to find it now Sorry for taking so long, here is the problem of reactivity with proxy

Eighth•6mo ago

The problem is that vue3 uses a proxy shell, which prevents you from directly accessing the object and you have to use such a crutch. Difficulties arise when there are many such objects and then you have to write a loop that will execute such a crutch for each element

Rägnar O'ock•6mo ago

I don't want to get ahead with that little code, but that looks wrong to me, I don't know what this nor what items refers to, but you shouldn't need that [0] access a .value if items is a ref, but that's it

Eighth•6mo ago

Thank you very much for explaining it to me

Gaming

Programming

Problems in vue3