Update: Vue 3 Components in ASP.NET Core using vue3-sfc-loader
https://tolbxela.medium.com/update-vue-3-components-in-asp-net-core-using-vue3-sfc-loader-e0ed74d86cc8?source=rss------vuejs-5
Upgrade to Vue 3 of my previous article for Vue 2Continue reading on Medium »
https://tolbxela.medium.com/update-vue-3-components-in-asp-net-core-using-vue3-sfc-loader-e0ed74d86cc8?source=rss------vuejs-5
Upgrade to Vue 3 of my previous article for Vue 2Continue reading on Medium »
Create a simple time ago component in Vue using Moment.js
https://dev.to/maxwelladapoe/create-a-simple-time-ago-component-in-vue-using-momentjs-3en7
Ever needed a time ago component where you can parse a datetime string and get your date in the format like 10 days ago , a year ago etc.? Well you could create that easily in vue.js using moment.js.
Let's dive straight into it.
Install moment.js using npm npm install moment --save or with yarn yarn add moment
Create a new component. You can name it TimeAgo.vue
In your component
#TimeAgo.js
<template>
<span>{{convertedDateTime}}</span>
</template>
<script>
import moment from 'moment'
export default {
name: "TimeAgo",
props:{
dateTime:{
required:true
}
},
created() {
this.moment = moment;
},
computed:{
convertedDateTime(){
return moment(this.dateTime).fromNow();
}
}
}
</script>
to use it in your project
...
<time-ago :dateTime='new Date()'/>
...
<script>
import TimeAgo from "@/components/TimeAgo";
export default {
...
components: {
TimeAgo
}
...
}
</script>
and thats it. This should work in vue 2 and vue 3 without any issues. if you need to extend it you can see the moment.js docs
https://dev.to/maxwelladapoe/create-a-simple-time-ago-component-in-vue-using-momentjs-3en7
Ever needed a time ago component where you can parse a datetime string and get your date in the format like 10 days ago , a year ago etc.? Well you could create that easily in vue.js using moment.js.
Let's dive straight into it.
Install moment.js using npm npm install moment --save or with yarn yarn add moment
Create a new component. You can name it TimeAgo.vue
In your component
#TimeAgo.js
<template>
<span>{{convertedDateTime}}</span>
</template>
<script>
import moment from 'moment'
export default {
name: "TimeAgo",
props:{
dateTime:{
required:true
}
},
created() {
this.moment = moment;
},
computed:{
convertedDateTime(){
return moment(this.dateTime).fromNow();
}
}
}
</script>
to use it in your project
...
<time-ago :dateTime='new Date()'/>
...
<script>
import TimeAgo from "@/components/TimeAgo";
export default {
...
components: {
TimeAgo
}
...
}
</script>
and thats it. This should work in vue 2 and vue 3 without any issues. if you need to extend it you can see the moment.js docs
DEV Community
Create a simple time ago component in Vue using Moment.js
Ever needed a time ago component where you can parse a datetime string and get your date in the...
Build Web Apps with Vue JS 3 & Firebase
https://medium.com/@maxiruti/build-web-apps-with-vue-js-3-firebase-e71aac3dac05?source=rss------vuejs-5
Build Web Apps with Vue JS 3 & FirebaseContinue reading on Medium »
https://medium.com/@maxiruti/build-web-apps-with-vue-js-3-firebase-e71aac3dac05?source=rss------vuejs-5
Build Web Apps with Vue JS 3 & FirebaseContinue reading on Medium »
Why You Should Use VueJS
https://dev.to/adyaksa_w/why-you-should-use-vuejs-49il
In the current framework trend for frontend, there is 3 mainstream that we commonly know: React, Vue, and Angular. In my recent projects, when there is a need to write frontend applications, I always used Vue. I just love using Vue.
From VueJS Official Site
Why? Well, first of all, I'm not hardcore enough to learn many things just for a simple project. I want simplicity. So for this reason, I excluded Angular. Now it comes down to React and Vue. Here comes my second reason: I love Vue syntax.
First of all, the file structure is quite simple yet separated beautifully. If you never touched Vue before, here is a snippet of basic Vue syntax
**<template>**
<h1>Hello {{name}}</h1>
**</template>
<script>**
export default {
data() {
return {
name: 'Adyaksa',
}
}
}
**</script>
<style>**
h1 {
color: red;
}
**</style>**
So Vue file structure is divided into 3 sections: template, script, and style. The combination will form a Vue Component. The template is where the HTML structure is described. All heavy lifting is placed in the script section, where we can put all normal frontend scripts here in addition to Vue-specific scripts such as component lifecycle. And then the last section is where we put our CSS for the code.
One thing that I have experienced when using React is that when your team doesn't have a clear formatting guideline, it's harder to find specific code that you need. Moreover, when you have many components with their own specific styling, you will have an enormous number of files that you have. But when we're using Vue, all the HTML, CSS, and JS are combined in 1 class with a specific order that is already defined. Because of this, we know where each section is located in the file and we have an easier time finding what we need. This is also described in Vue docs: "What About Separation of Concerns?"
And then the second one is what makes creating HTML in Vue fun: Directives. Imagine that you want to create a list based on value from array arrayList . You can easily do it by adding v-for directives like this:
<li **v-for="item in arrayList"**> {{ item }} </li>
Hey, what's so fun about it? Well, imagine that you want to create something more complex such as displaying the ranking of an item with its attributes. By using this, we can just add v-for directives to easily access all the attributes of the item. And there are many more neat directives such as v-if, v-show, v-model etc.
But it's not all fun and game. Like all languages, VueJS readability would suffer at a more complex project. Its code structure also doesn't help, with every bit of code stuffed in a file. But still, I think this is a small price to use this fun language.
Hello, I'm Adyaksa, and I write about software development and my language learning experience. I'm planning to release a weekly blog about something that I find interesting while working on my side projects. If you're interested, you can follow me to keep updated about it!
https://dev.to/adyaksa_w/why-you-should-use-vuejs-49il
In the current framework trend for frontend, there is 3 mainstream that we commonly know: React, Vue, and Angular. In my recent projects, when there is a need to write frontend applications, I always used Vue. I just love using Vue.
From VueJS Official Site
Why? Well, first of all, I'm not hardcore enough to learn many things just for a simple project. I want simplicity. So for this reason, I excluded Angular. Now it comes down to React and Vue. Here comes my second reason: I love Vue syntax.
First of all, the file structure is quite simple yet separated beautifully. If you never touched Vue before, here is a snippet of basic Vue syntax
**<template>**
<h1>Hello {{name}}</h1>
**</template>
<script>**
export default {
data() {
return {
name: 'Adyaksa',
}
}
}
**</script>
<style>**
h1 {
color: red;
}
**</style>**
So Vue file structure is divided into 3 sections: template, script, and style. The combination will form a Vue Component. The template is where the HTML structure is described. All heavy lifting is placed in the script section, where we can put all normal frontend scripts here in addition to Vue-specific scripts such as component lifecycle. And then the last section is where we put our CSS for the code.
One thing that I have experienced when using React is that when your team doesn't have a clear formatting guideline, it's harder to find specific code that you need. Moreover, when you have many components with their own specific styling, you will have an enormous number of files that you have. But when we're using Vue, all the HTML, CSS, and JS are combined in 1 class with a specific order that is already defined. Because of this, we know where each section is located in the file and we have an easier time finding what we need. This is also described in Vue docs: "What About Separation of Concerns?"
And then the second one is what makes creating HTML in Vue fun: Directives. Imagine that you want to create a list based on value from array arrayList . You can easily do it by adding v-for directives like this:
<li **v-for="item in arrayList"**> {{ item }} </li>
Hey, what's so fun about it? Well, imagine that you want to create something more complex such as displaying the ranking of an item with its attributes. By using this, we can just add v-for directives to easily access all the attributes of the item. And there are many more neat directives such as v-if, v-show, v-model etc.
But it's not all fun and game. Like all languages, VueJS readability would suffer at a more complex project. Its code structure also doesn't help, with every bit of code stuffed in a file. But still, I think this is a small price to use this fun language.
Hello, I'm Adyaksa, and I write about software development and my language learning experience. I'm planning to release a weekly blog about something that I find interesting while working on my side projects. If you're interested, you can follow me to keep updated about it!
DEV Community
Why You Should Use VueJS
In the current framework trend for frontend, there is 3 mainstream that we commonly know: React, Vue,...
Why You Should Use VueJS
https://medium.com/@adyaksa.w/why-you-should-use-vuejs-d7d97aaf964c?source=rss------vuejs-5
In the current framework trend for frontend, there is 3 mainstream that we commonly know: React, Vue, and Angular. In my recent projects…Continue reading on Medium »
https://medium.com/@adyaksa.w/why-you-should-use-vuejs-d7d97aaf964c?source=rss------vuejs-5
In the current framework trend for frontend, there is 3 mainstream that we commonly know: React, Vue, and Angular. In my recent projects…Continue reading on Medium »
Creating Tabs with Vue 2 and Tailwind css
https://dev.to/maxwelladapoe/creating-tabs-with-vue-2-and-tailwind-css-121d
So I was building an admin dashboard for hirehex using tailwind and needed to create some Tabs.
To be honest its rather simple to implement but requires some understanding of how components work in vue.js
I will be skipping the vue.js & tailwind project set up. But should you need it, you can check it out here
We will need 2 components for this:
Tab.vue & Tabs.vue
in Tab.vue:
<template>
<div v-show="isActive">
<slot></slot>
</div>
</template>
<script>
export default {
name: "Tab",
props: {
name: {
required: true,
type: [Number, String],
},
selected:{
default: false
}
},
data(){
return {
isActive:false
}
},
mounted(){
this.isActive = this.selected;
}
}
</script>
in Tabs.vue:
<template>
<div>
<div id="tab-links">
<ul class="flex space-x-2 ">
<li v-for="(tab, index) in tabs "
:key="index"
:class="{'border-b-2':tab.isActive}"
class="py-2 border-solid text-center w-40 cursor-pointer"
@click="selectTab(tab)">
{{tab.name}}
</li>
</ul>
<hr>
</div>
<div id="tab-details">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "Tabs",
data() {
return {
tabs: []
}
},
created() {
this.tabs = this.$children;
},
mounted() {
//check if a tab has been selected by default
let hasTabBeenSelected = this.tabs.findIndex(child=> child.selected ===true)
//set the default to the first one
if (hasTabBeenSelected === -1){
this.tabs[0].isActive=true;
}
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = tab.name === selectedTab.name;
})
}
}
}
</script>
<style scoped>
</style>
With these in place you should have a working tab component.
Feel free to modify this in anyway to meet your use case.
Thanks.
https://dev.to/maxwelladapoe/creating-tabs-with-vue-2-and-tailwind-css-121d
So I was building an admin dashboard for hirehex using tailwind and needed to create some Tabs.
To be honest its rather simple to implement but requires some understanding of how components work in vue.js
I will be skipping the vue.js & tailwind project set up. But should you need it, you can check it out here
We will need 2 components for this:
Tab.vue & Tabs.vue
in Tab.vue:
<template>
<div v-show="isActive">
<slot></slot>
</div>
</template>
<script>
export default {
name: "Tab",
props: {
name: {
required: true,
type: [Number, String],
},
selected:{
default: false
}
},
data(){
return {
isActive:false
}
},
mounted(){
this.isActive = this.selected;
}
}
</script>
in Tabs.vue:
<template>
<div>
<div id="tab-links">
<ul class="flex space-x-2 ">
<li v-for="(tab, index) in tabs "
:key="index"
:class="{'border-b-2':tab.isActive}"
class="py-2 border-solid text-center w-40 cursor-pointer"
@click="selectTab(tab)">
{{tab.name}}
</li>
</ul>
<hr>
</div>
<div id="tab-details">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "Tabs",
data() {
return {
tabs: []
}
},
created() {
this.tabs = this.$children;
},
mounted() {
//check if a tab has been selected by default
let hasTabBeenSelected = this.tabs.findIndex(child=> child.selected ===true)
//set the default to the first one
if (hasTabBeenSelected === -1){
this.tabs[0].isActive=true;
}
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = tab.name === selectedTab.name;
})
}
}
}
</script>
<style scoped>
</style>
With these in place you should have a working tab component.
Feel free to modify this in anyway to meet your use case.
Thanks.
DEV Community
Creating Tabs with Vue 2 and Tailwind css
So I was building an admin dashboard for hirehex using tailwind and needed to create some Tabs. To...
JS Operators You Need To Start Using
https://javascript.plainenglish.io/js-operators-you-need-to-start-using-7ebdfd4d2698?source=rss------vuejs-5
Write better and clean code. There are more to JS than =, ==, && and ||Continue reading on JavaScript in Plain English »
https://javascript.plainenglish.io/js-operators-you-need-to-start-using-7ebdfd4d2698?source=rss------vuejs-5
Write better and clean code. There are more to JS than =, ==, && and ||Continue reading on JavaScript in Plain English »
Angular vs React vs Vue
https://medium.com/cits-tech/angular-vs-react-vs-vue-e1783e23a4ae?source=rss------vuejs-5
Medium’daki ilk yazımla karşınızdayım. İki bölümden oluşacak bu serinin ilk bölümünde Angular, React ve Vue’yu popülerlik, community…Continue reading on CITS Tech »
https://medium.com/cits-tech/angular-vs-react-vs-vue-e1783e23a4ae?source=rss------vuejs-5
Medium’daki ilk yazımla karşınızdayım. İki bölümden oluşacak bu serinin ilk bölümünde Angular, React ve Vue’yu popülerlik, community…Continue reading on CITS Tech »
Vue JS — Türkçe kaynak
https://medium.com/kocsistem/vue-js-t%C3%BCrk%C3%A7e-kaynak-cbb1d0d73490?source=rss------vuejs-5
Sol şeridi boşaltın Vue Js geçiyor.Continue reading on KoçSistem »
https://medium.com/kocsistem/vue-js-t%C3%BCrk%C3%A7e-kaynak-cbb1d0d73490?source=rss------vuejs-5
Sol şeridi boşaltın Vue Js geçiyor.Continue reading on KoçSistem »
Create a beautiful Todo app in Vuetify: Toolbars
https://codingbeauty.medium.com/create-a-beautiful-todo-app-in-vuetify-toolbars-5e321f43c548?source=rss------vuejs-5
Welcome to this brand new tutorial series, where we’re going to be creating a Todo app all the way from start to finish using the popular…Continue reading on Medium »
https://codingbeauty.medium.com/create-a-beautiful-todo-app-in-vuetify-toolbars-5e321f43c548?source=rss------vuejs-5
Welcome to this brand new tutorial series, where we’re going to be creating a Todo app all the way from start to finish using the popular…Continue reading on Medium »
An Example of Benchmarking Core Web Vitals of React and Vue Frontends
https://javascript.plainenglish.io/an-example-of-benchmarking-core-web-vitals-of-react-and-vue-frontends-58e3b4a9c94a?source=rss------vuejs-5
Skilled people like Sunil Sandhu are better than me at developing applications using several frameworks.Continue reading on JavaScript in Plain English »
https://javascript.plainenglish.io/an-example-of-benchmarking-core-web-vitals-of-react-and-vue-frontends-58e3b4a9c94a?source=rss------vuejs-5
Skilled people like Sunil Sandhu are better than me at developing applications using several frameworks.Continue reading on JavaScript in Plain English »
How To Add Google Analytics to Your Vue.js Web App
https://medium.com/@surbhitrao/how-to-add-google-analytics-to-your-vue-js-web-app-709c6e7c5872?source=rss------vuejs-5
Google Analytics is a free tracking tool to analyze your website visitors — this is also possible in Vue.js Apps. Here you can find out…Continue reading on Medium »
https://medium.com/@surbhitrao/how-to-add-google-analytics-to-your-vue-js-web-app-709c6e7c5872?source=rss------vuejs-5
Google Analytics is a free tracking tool to analyze your website visitors — this is also possible in Vue.js Apps. Here you can find out…Continue reading on Medium »
Angular vs React vs Vue Part 2
https://medium.com/cits-tech/angular-vs-react-vs-vue-part-2-6abe6ba29c25?source=rss------vuejs-5
Angular, React ve Vue üzerinden karşılaştırmalar yaptığımız serinin ikinci kısmından merhaba. Bu kısımda development, architecture ve…Continue reading on CITS Tech »
https://medium.com/cits-tech/angular-vs-react-vs-vue-part-2-6abe6ba29c25?source=rss------vuejs-5
Angular, React ve Vue üzerinden karşılaştırmalar yaptığımız serinin ikinci kısmından merhaba. Bu kısımda development, architecture ve…Continue reading on CITS Tech »
Uni Локализация на веб компонентах и с абсолютной кастомизацией. Работает везде (
https://habr.com/ru/post/598319/?utm_campaign=598319&utm_source=habrahabr&utm_medium=rss
Я всегда мечтал о функциональности, которую можно было бы использовать на любом web проекте. Еще я мечтал иметь максимально гибкое решение для абсолютной кастомизации под себя. Два года назад мы начали работать над воплощением этой смелой мечты в реальность. Первой такой функциональностью стала именно Uni Локализация. Читать далее
https://habr.com/ru/post/598319/?utm_campaign=598319&utm_source=habrahabr&utm_medium=rss
Я всегда мечтал о функциональности, которую можно было бы использовать на любом web проекте. Еще я мечтал иметь максимально гибкое решение для абсолютной кастомизации под себя. Два года назад мы начали работать над воплощением этой смелой мечты в реальность. Первой такой функциональностью стала именно Uni Локализация. Читать далее
Хабр
Uni Localization. Абсолютная кастомизация, работает на любом сайте (Vue, React, Angular, ...)
Disclaimer: Эта статья про веб компоненты и уже реализованное UI решение на них. Если вам нравится все новое и нестандартное, тогда, я уверен вам понравится и наша реализация. Я всегда мечтал о...
[Source Code]Vue3 — Utility Function In 5 Minutes
https://steven-chen.medium.com/source-code-vue3-utility-function-in-5-minutes-8d28ed7abdf8?source=rss------vuejs-5
impress interviewee by reading source codeContinue reading on Medium »
https://steven-chen.medium.com/source-code-vue3-utility-function-in-5-minutes-8d28ed7abdf8?source=rss------vuejs-5
impress interviewee by reading source codeContinue reading on Medium »
Mengenal Tentang VueJS
https://medium.com/@dimaseka83/mengenal-tentang-vuejs-ae57fa250c26?source=rss------vuejs-5
VueJS merupakan progressive framework javascript yang mengadopsi ekosistem yang bertahap dan bertingkat antar pustaka dan berfitur lengkap…Continue reading on Medium »
https://medium.com/@dimaseka83/mengenal-tentang-vuejs-ae57fa250c26?source=rss------vuejs-5
VueJS merupakan progressive framework javascript yang mengadopsi ekosistem yang bertahap dan bertingkat antar pustaka dan berfitur lengkap…Continue reading on Medium »
Medium
Mengenal Tentang VueJS
VueJS merupakan progressive framework javascript yang mengadopsi ekosistem yang bertahap dan bertingkat antar pustaka dan berfitur lengkap…
Vue.js Interview Challenge — #10 — Countdown Timer — Solution
https://medium.com/js-dojo/vue-js-interview-challenge-10-countdown-timer-solution-462b2e6383c2?source=rss------vuejs-5
Solution for Interview Challenge # 10Continue reading on Vue.js Developers »
https://medium.com/js-dojo/vue-js-interview-challenge-10-countdown-timer-solution-462b2e6383c2?source=rss------vuejs-5
Solution for Interview Challenge # 10Continue reading on Vue.js Developers »
Vue.js Interview Challenge — #10 — Countdown Timer
https://medium.com/js-dojo/vue-js-interview-challenge-10-countdown-timer-ecfdc09ddd25?source=rss------vuejs-5
Interview Challenge # 10Continue reading on Vue.js Developers »
https://medium.com/js-dojo/vue-js-interview-challenge-10-countdown-timer-ecfdc09ddd25?source=rss------vuejs-5
Interview Challenge # 10Continue reading on Vue.js Developers »
Adventure / Gravel cycling blog: Bikes and Bacon
https://marekmis.medium.com/adventure-gravel-cycling-blog-bikes-and-bacon-e4a6e39a9470?source=rss------vuejs-5
I finally finished building and writing the first batch of content for my new blog called Bikes and Bacon. Check it out here…Continue reading on Medium »
https://marekmis.medium.com/adventure-gravel-cycling-blog-bikes-and-bacon-e4a6e39a9470?source=rss------vuejs-5
I finally finished building and writing the first batch of content for my new blog called Bikes and Bacon. Check it out here…Continue reading on Medium »
Best VUE JS Training Course in Bangalore | AchieversIT
https://medium.com/@achieversittraininga/best-vue-js-training-course-in-bangalore-achieversit-5275bc6d1dc?source=rss------vuejs-5
OverviewContinue reading on Medium »
https://medium.com/@achieversittraininga/best-vue-js-training-course-in-bangalore-achieversit-5275bc6d1dc?source=rss------vuejs-5
OverviewContinue reading on Medium »