Updates to my Vue 2 articles
https://tolbxela.medium.com/updates-to-my-vue-2-articles-e99280ab9c54?source=rss------vuejs-5
Migration from Vue 2 to Vue 3Continue reading on Medium »
https://tolbxela.medium.com/updates-to-my-vue-2-articles-e99280ab9c54?source=rss------vuejs-5
Migration from Vue 2 to Vue 3Continue reading on Medium »
Forcing Vue.js devtools extension to work in production mode on any website
https://medium.com/drmax-dev-blog/forcing-vue-js-devtools-extension-to-work-in-production-mode-on-any-website-84798162b5f?source=rss------vuejs-5
This “hack” is kind of must have for any Vue.js developer. Read more…Continue reading on Dr.Max IT Development Blog »
https://medium.com/drmax-dev-blog/forcing-vue-js-devtools-extension-to-work-in-production-mode-on-any-website-84798162b5f?source=rss------vuejs-5
This “hack” is kind of must have for any Vue.js developer. Read more…Continue reading on Dr.Max IT Development Blog »
My top 3 places to go to when I am stuck with programming problem
https://medium.com/@maltinimalmo/my-top-3-places-to-go-to-when-i-am-stuck-with-programming-problem-39899f270ee?source=rss------vuejs-5
The struggles of learning by your selfContinue reading on Medium »
https://medium.com/@maltinimalmo/my-top-3-places-to-go-to-when-i-am-stuck-with-programming-problem-39899f270ee?source=rss------vuejs-5
The struggles of learning by your selfContinue reading on Medium »
Medium
My top 3 places to go to when I am stuck with a programming problem
The struggles of learning by your self
Ionic Framework v6 VueJS And Firebase - Authentication Flow Using Pinia For State Management
https://dev.to/aaronksaunders/ionic-framework-v6-vuejs-and-firebase-authentication-flow-using-pinia-for-state-management-5aia
Source code walkthrough for a template for Vuejs authentication flow using firebase for authentication, latest Ionic Framework version 6, and Pinia for State Management.
We are also using the newest version of Firebase in this template, the APIs have changed a bit but the examples in the application try to make it easier
The Video Covers
How to manage the authentication flow with state management in Pinia
Keep the user state and profile information there.
Manage authentication guards in the vuejs router utilizing state variables.
Updating data in your application views as the data is refreshed in firebase. Using collection listeners and updating the Pinia State.
Template Source Code
aaronksaunders
/
ionic-v6-firebase-tabs-auth
template for vuejs authentication flow using latest firebase version, latest ionic v6 and pinia for state management
ionic-v6-firebase-tabs-auth
template for vuejs authentication flow using latest firebase version, latest ionic v6 and pinia for state management
Video On YouTube
https://youtu.be/XWHdFQPkS9Q
View on GitHub
Links
Pinia Video - https://youtu.be/sKGh2wp4QfM
Pinia Documentation - https://pinia.vuejs.org/
Source - https://github.com/aaronksaunders/ionic-v6-firebase-tabs-auth
Follow Me
twitter - https://twitter.com/aaronksaunders
github - https://github.com/aaronksaunders
udemy - https://www.udemy.com/user/aaronsaunders
gumroad - https://app.gumroad.com/fiwic
https://dev.to/aaronksaunders/ionic-framework-v6-vuejs-and-firebase-authentication-flow-using-pinia-for-state-management-5aia
Source code walkthrough for a template for Vuejs authentication flow using firebase for authentication, latest Ionic Framework version 6, and Pinia for State Management.
We are also using the newest version of Firebase in this template, the APIs have changed a bit but the examples in the application try to make it easier
The Video Covers
How to manage the authentication flow with state management in Pinia
Keep the user state and profile information there.
Manage authentication guards in the vuejs router utilizing state variables.
Updating data in your application views as the data is refreshed in firebase. Using collection listeners and updating the Pinia State.
Template Source Code
aaronksaunders
/
ionic-v6-firebase-tabs-auth
template for vuejs authentication flow using latest firebase version, latest ionic v6 and pinia for state management
ionic-v6-firebase-tabs-auth
template for vuejs authentication flow using latest firebase version, latest ionic v6 and pinia for state management
Video On YouTube
https://youtu.be/XWHdFQPkS9Q
View on GitHub
Links
Pinia Video - https://youtu.be/sKGh2wp4QfM
Pinia Documentation - https://pinia.vuejs.org/
Source - https://github.com/aaronksaunders/ionic-v6-firebase-tabs-auth
Follow Me
twitter - https://twitter.com/aaronksaunders
github - https://github.com/aaronksaunders
udemy - https://www.udemy.com/user/aaronsaunders
gumroad - https://app.gumroad.com/fiwic
DEV Community
Ionic Framework v6 VueJS And Firebase - Authentication Flow Using Pinia For State Management
Source code walkthrough for a template for Vuejs authentication flow using firebase for...
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…