Deploy your Vue.js app to Azure using Terraform

https://dev.to/roxait/deploy-your-vuejs-app-to-azure-using-terraform-335b

Creiamo una app con Vue ed Electron 1° parte

https://chiarapassaro.medium.com/creiamo-una-app-con-vue-ed-electron-1-parte-147209265616?source=rss------vuejs-5
Come realizzare una app in Vue ed Electron che permette di generare e visualizzare delle palette di coloriContinue reading on Medium »

Complete Understanding of Server-Side Rendering for ReactJs

https://bytecodepandit.iss.onedium.com/complete-understanding-of-server-side-rendering-for-reactjs-aebbf666899f?source=rss------vuejs-5
Let’s play with some Nodejs and ReactjsContinue reading on Medium »

Best practices in Vue.js and Jest

https://medium.com/@lambrospd/best-practices-in-vue-js-and-jest-514e6eebe1c2?source=rss------vuejs-5
In this tutorial we are going to go through the process of writing unit tests in Jest for a Vue.js application. I am going to use my…Continue reading on Medium »

Migrating from Vue 2 to Vue 3

https://tolbxela.medium.com/migrating-from-vue-2-to-vue-3-f4c7f3c89e33?source=rss------vuejs-5
My experience and tips of upgrading Vue.js projects to Vue 3Continue reading on Medium »

Update: Using Vue 3 Components in ASP.NET Core without bundler

https://tolbxela.medium.com/update-using-vue-3-components-in-asp-net-core-without-bundler-d144f9a649e6?source=rss------vuejs-5
An update to my article about using Vue.js Components in ASP.NET Core Web Application without JavaScript bundlerContinue reading on Medium »

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 »

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 »

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 »

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

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 »

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

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 »

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!

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 »

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.

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 »

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 »

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 »

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 »

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 »