Welcome to Vue Discussions!

[yyx990803]

👋 Welcome to Vue Discussions!

We’re using Discussions as a place for the community to connect and help each other. This is where you can:

• Ask questions you’re wondering about.
• Answer questions from other community members.
• Share ideas.
• Show your work that you've created with Vue.
• Engage with other community members.

Note: if you have a substantial feature request, please head over to the vuejs/rfcs repo which is dedicated to framework design discussions.

Please be welcoming and open-minded, and follow our Code of Conduct. Remember that this is a community we build together 💪.

[coder-hxl]

😄

[adlkt]

vue-router会有新文档吗

[santoshsubedi71]

hello vue

[santoshsubedi71]

hi there

[shawn-yee]

Awesome~
I want to know the vue 4 roadmap 😎

[Luferov]

Wow))))

[likui628]

cool

[hminghe]

基于 Vue + Ts + Vite + Element-plus 的中后台
https://github.com/hminghe/md-admin-element-plus

[zxm965]

more attention #5218

[darkodemic]

How does this impact forums and other communication channels? Just another channel or replacing the official forum?
Thanks

[yzqdev]

Awesome!
Hope vue gets better!😃

[wmasfoe]

支持 Vue，尤大 YYDS

[insomnia-creator]

Hey there! I'm welcoming myself into Vue Discussions 😀

[liulinboyi]

Awesome!

[Luferov]

What we should use in new projects, vite or webpack?

[LinusBorg]

Vite is the new recommendation

[yiiewang]

#5902 (reply in thread)

[Jlnvv-tom]

agree

[huangkairan]

got it

[TTcom]

its great

[LawLessOutLawz]

bash npm Create a new Vue.js project**: bash vue create stencils-of-the-streets 3. **Navigate to your project directory**: bash cd stencils-of-the-streets ``` ###

[CarterLi]

Suggestion: Make .vue more expressive

Say I want to join two lists ( fooList and barList ) in vue template

Currently we can only write

<ul>
  <li v-for="foo of fooList" :key="foo.fooId">
    <li v-text="foo.num" />
    <li v-text="foo.text" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).num" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).text" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).text2" />
  </li>
</ul>

barList.find() is in v-for, so computed won't work here. Moving them into a new component works but that's a new topic.

In JSX we can write

<ul>
{
  fooList.map(foo => {
    const bar = barList.find(bar => bar.barId === foo.barId);
    return [
      <li v-text={foo.num} />
      <li v-text={foo.text} />
      <li v-text={bar.num} />
      <li v-text={bar.text} />
      <li v-text={bar.text2} />
    ];
  })
}
</ul>

If we can create new variables in Vue template like what we can do in JSX, we can write

<ul>
  <li v-for="foo of fooList" :key="foo.fooId">
    <script type="a special tag indicates that this script is inlined into generated component code">
      const bar = barList.find(bar => bar.barId === foo.barId);
    </script>
    <li v-text="foo.num" />
    <li v-text="foo.text" />
    <li v-text="bar.num" />
    <li v-text="bar.text" />
    <li v-text="bar.text2" />
  </li>
</ul>

It's not only cleaner, but also more efficient.

[CarterLi]

Move complex code into other place doesnt mean the whole code is simplified.

3 lines VS 11 lines addition, which one is more complex?

[CarterLi]

Another example:

<ul>
  <li v-for="item of list" :key="item.id">
    <script type="a special tag indicates that this script is inlined into generated component code">
      const inputRef = ref<HTMLInputElement>():
    </script>
    
    <input v-model="item.text" :ref="x => inputRef = x" />
    <button @click="inputRef.focus()">Focus this line</button>
  </li>
</ul>

For now I would rather use $event.currentTarget.previousElementSibling than the standard ref stuff

[jesusantguerrero]

Move complex code into other place doesnt mean the whole code is simplified.

3 lines VS 11 lines addition, which one is more complex?

Line of code isn't a measure of complexity. But complex computations in the template are harder to maintain and reuse.

But you're right your proposal has less lines of code.

[hminghe]

Another example:

<ul>
  <li v-for="item of list" :key="item.id">
    <script type="a special tag indicates that this script is inlined into generated component code">
      const inputRef = ref<HTMLInputElement>():
    </script>
    
    <input v-model="item.text" :ref="x => inputRef = x" />
    <button @click="inputRef.focus()">Focus this line</button>
  </li>
</ul>

For now I would rather use $event.currentTarget.previousElementSibling than the standard ref stuff

Create a new component

[mrpunkdasilva]

I don't know, but the JSX syntax for me is more readable. But Vue is nice to work with.

[CarterLi]

Suggestion: Make <script setup> support src

Due to the difference in module execution semantics, code inside <script setup> relies on the context of an SFC. When moved into external .js or .ts files, it may lead to confusion for both developers and tools. Therefore, <script setup> cannot be used with the src attribute.

If we name the script MyComponent.vue.ts it won't confuse developers

if we explicitly write import { defineProps, defineEmits, defineExpose } from 'vue' it won't confuse tools ( at least for IDEs )

I like to move my business logic code into a seperate file and I don't want to make my template file toooooo long. Please consider it twice.

[drocha87]

I'm wondering if it will be to hard to implement a way to infer the code behind without the need to have a <script setup src="..."/> (if it have the same name but ends with .ts for example login.vue and login.vue.ts). This is how it works in Blazor for example.

And now that vscode has Explorer file nesting it's even better.

[LinusBorg]

Since you already posted two suggestions/feature requests as comments of this Welcome Announcement:

You can start individual discussions for things. That's what this discussions" Feature is about.

As for new feature requests - as mentioned in this very announcement, take them to: https://github.com/vuejs/rfcs

[mrpunkdasilva]

Lets go!!!

[nisancigokmen]

cool :=)
,gökmen.

[Rho-bur]

Hello!
Glad I found this and hope it will not be as confusing as the Discord channel are :-)
Have a great weekend everybody!

[PengYYYYY]

how to do UI component library testing?

[Azema4ka]

Use test utils

[PengYYYYY]

Use test utils

I use vitest and vue test utils to do unit test in tdesign-vue-next. and I initiated a unit test improvement program。

What confuses me is that dimensions of component library tests。coverage？we did snapshots of many demos, mybe it can improve test coverage，but it's very revealing。I'm more eager for the practical experience of the system。

[mrpunkdasilva]

Use test utils

I use vitest and vue test utils to do unit test in tdesign-vue-next. and I initiated a unit test improvement program。

What confuses me is that dimensions of component library tests。coverage？we did snapshots of many demos, mybe it can improve test coverage，but it's very revealing。I'm more eager for the practical experience of the system。

Yes, that also confuses me. I think the same only in practice we will know for sure if these tests and other features will work

[PengYYYYY]

so, TDD may avoid a lot of mistakes that are made right from the start。But our code has already been written。How to reduce errors when npm packages are delivered to users。we add as many demo scenes as possible。but not systematized。

[SerMs]

Vue4啥时候出来啊

[exposir]

😄

[ashokpds15]

How to learn

[liulinboyi]

I went to ask new bing , this is its answer, I hope it will help you：

please tell me how to learn vue3

Sure, I can help you with that. There are many ways to learn Vue 3, a front-end JavaScript framework that makes it simpler to create powerful websites. Here are some resources that you might find useful:

● A Beginner's Guide to Vue 3¹ — SitePoint: This article covers the fundamentals of Vue.js, such as creating a Vue application with Vue CLI, rendering lists, using conditional rendering, handling user inputs and events, and more.
● Introduction | Vue.js²: This is the official documentation for Vue 3. It explains what Vue is, how it works, and how to use it in different ways. It also has a tutorial section that walks you through building a simple app with Vue 3.
● Tutorial | Vue.js³: This is another official tutorial for Vue 3. It teaches you how to build a real-world application with Vue 3 step by step. You will learn about components, props, state management, routing, testing, and deployment.

I hope these resources will help you get started with learning Vue 3. If you have any questions or feedback, please let me know.😊

(1) A Beginner's Guide to Vue 3 — SitePoint. https://www.sitepoint.com/vue-3-beginner-guide/
(2) Introduction | Vue.js. https://vuejs.org/guide/introduction.html
(3) Tutorial | Vue.js. https://vuejs.org/tutorial/

More resources to learn Vue 3.

Sure, I can give you more resources to learn Vue 3. Here are some more options that you might like:

● Top ways to learn Vue 3¹ | Vue Mastery: This blog post lists some of the official Vue resources, such as the RFCs, articles, and videos that explain what's new and exciting in Vue 3. It also includes some links to other blogs and podcasts that cover Vue 3 topics.
● Learn Vue 3: The best resources 2023 - Made with Vue.js²: This blog post provides a comprehensive overview of different types of resources for learning Vue 3, such as official docs, video courses, tutorials, conference talks, books, and newsletters. It also gives some tips on how to choose the best resource for your needs and goals.
● Vue Mastery | The best way to learn Vue.js³: This is a platform that offers high-quality video courses on various aspects of Vue development. It has a dedicated track for learning Vue 3 with courses on composition API, reactivity system, Vite.js, Pinia state management library, and more. Some of the courses are taught by Evan You himself or other core team members.
● The best resource to learn Vue 3? : r/vuejs - reddit⁴: This is a Reddit thread where people share their opinions and experiences on different resources for learning Vue 3. You can find some personal recommendations and feedback from other learners.

I hope these additional resources will help you learn more about Vue 3. If you have any questions or feedback, please let me know.😊

(1) Top ways to learn Vue 3 | Vue Mastery. https://www.vuemastery.com/blog/top-ways-to-learn-Vue-3/
(2) Learn Vue 3: The best resources 2023 - Made with Vue.js. https://madewithvuejs.com/blog/learn-vue-3-best-resources
(3) Vue Mastery | The best way to learn Vue.js. https://www.vuemastery.com/
(4) The best resource to learn Vue 3? : r/vuejs - reddit. https://www.reddit.com/r/vuejs/comments/q5q42w/the_best_resource_to_learn_vue_3/

[pythonliuwei-root]

我在使用vue3.3.4版本的时候发现在App.vue文件里引入Directive引入时报错。
App.vue文件的代码是这样的：

<script setup> import {ref, reactive, Directive} from 'vue' </script> <style scopred> </style>

网页上报错是这样的：Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=8d1ebff5' does not provide an export named 'Directive'

[liulinboyi]

看到了😂，#8856 Link

[frank-dong-no]

TypeError: Cannot assign to read only property 'length' of object '[object Array]'新建vue工程然后刷新一下就会出现这个异常，vue版本是2.6.14，node版本是12.18.0

[frankie-zeng]

@yyx990803 VUE-languagetool dead?
一个语言的没有好的提示和检查工具必然会走向衰落，目前Vscode下的VUE提示工具严重有问题，可以搜一下languagetool下的关于慢的issue，能出面帮忙解决一下吗

[pjg864]

Help! When I want to add [download](./test.py) in vuepress(hope theme) markdown, it converts to xxxx/test.py.html, and failed to read the content.
How can I fix this issue?

[yaxingson]

Good

[dage212]

HaHa,I wrote a Vue source code blog website. Come and take a look!

vue-source-docs

[ElonCassino-az]

Thank you for the warm welcome to Vue Discussions! 🎉

This sounds like an excellent space for the community to collaborate, share knowledge, and grow together. I’m excited to:

• Explore new ideas and solutions with fellow Vue enthusiasts.
• Ask and answer questions to help improve our collective understanding.
• Share and get feedback on projects built with Vue.

I appreciate the focus on maintaining a positive and inclusive environment. Let’s make this community a great place for everyone to learn and contribute! 💚

Looking forward to being a part of this journey with all of you! 🚀

[burak-akdogan]

Love Vue!