Creating Custom Lists with Navigation Drawers | Vuetify To-Do List App Tutorial

https://javascript.plainenglish.io/creating-custom-lists-with-navigation-drawers-vuetify-to-do-list-app-tutorial-c64c92b645f6?source=rss------vuejs-5
Enable users to create custom lists and select them from a navigation drawer.Continue reading on JavaScript in Plain English »

I Chose VueJs As A Framework To Learn And I Got My First Job

https://nikakharebava.medium.com/i-chose-vuejs-as-a-framework-to-learn-and-i-got-my-first-job-5be4397cc6d4?source=rss------vuejs-5
Why I chose VueJs and how it helped me to find my first job as a Front-end developer.Continue reading on Medium »

How to add blog posts to github readme?

https://dev.to/cguttweb/how-to-add-blog-posts-to-github-readme-k39
Hey so I have setup a Github Readme file however I would like to be able if possible to add my latest blog posts it seems asa though it is possibly could someone point me in the right directionm on how to do this?
My site is built with Nuxt if that makes a difference but I do have feed setup I assume I need to reference that?
Any help much appreciated. Thanks!

Vue Component Dissapears After Deploy?

https://medium.com/@jiayi0819/vue-component-dissapears-after-deploy-7b3fe2511964?source=rss------vuejs-5
Vue page contents working fine in localhost but dissapeared after published? You’re welcome if yes.Continue reading on Medium »

A web portal where to upload photos: Photobook

https://fabrizio2210.medium.com/a-web-portal-where-to-upload-photos-photobook-17f77de9d137?source=rss------vuejs-5
https://github.com/fabrizio2210/photobookContinue reading on Medium »

TypeScript and Vue3 in VS Code Setup

https://dev.to/jpkli/typescript-and-vue3-in-vs-code-setup-m7n
Vue is great framework for developing web applications. For mid-size and large projects, using Typescript can help prevent many potential runtime errors and enforce better coding practices.
I'd like to share how to setup a project to use Typescript (.ts and .tsx) and Vue in VS Code with eslint.
Create a vue project using vue-cli



vue create vue-tsx


If you need to install vue-cli: yarn global add @vue/cli
From the CLI, choose at least Vue 3, Typescript, Babel, and Linter:


vue-cli will install all the dependencies based on these selections.
To use ESLint in VS Code for Typescript and Vue, install the Vetur and ESLint extensions for VS Code.
Then we can add the following into VS Code's setting (settings.json):



{
"eslint.validate": [
"vue",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}


Create a .eslintrc.js file to specify ESLint configs and rules:



module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
],
parserOptions: {
ecmaVersion: 2020,
jsx: true,
tsx: true
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"semi": ["warn", "never"],
"quotes": ["warn", "single", {"avoidEscape": true}],
"comma-dangle": ["warn", "never"],
"indent": ["warn", 2]
}
};


Then you can see warning and options for autofix in VS Code for your .tsx and .vue files:


That's it. Happy building!

Inline SVG icons in VueJS

https://medium.com/@dmitrymind/inline-svg-icons-in-vuejs-6b3e3f488912?source=rss------vuejs-5
This article will learn to create an icon component with the inline SVG code. The benefits of this approach are CSS customizability and…Continue reading on Medium »

Vuex Pratical Implementation In Nuxt

https://dev.to/abidemit/vuex-pratical-implementation-in-nuxt-4e2m
INTRODUCTION
In this post we'll be looking into practical ways of working with Vuex in Nuxt, and setting up nuxt project.
NUXT INSTALLATION
We have different ways of setting up Nuxt project

Using create-nuxt-app
Manual Installation

to move quickly use create-nuxt-app, to get started:



// Yarn
yarn create nuxt-app <project-name>
// Npm
npm init nuxt-app <project-name>
//Npx
npx create-nuxt-app <project-name>


questions on tools and packages will be asked after answering all, dependencies will be installed then you can do the following:



// yarn
cd <project-name>
yarn dev
//npm
cd <project-name>
npm run dev


for more info on the installation process checkout the Nuxt official Docs Nuxt Installation


SETTING UP VUEX IN NUXT
Before we move further we've different ways to setup vuex in Nuxt Checkout Josh Deltener 4 Ways To Setup Vuex in Nuxt.
Going further we'll be working with the third method from Josh Deltene's Four ways to setup Vuex in NUXT which is Namespaced, one file.
Namespaced, one file: Inside our store directory we'll be having a unique state feature named file for example: auth.js, cart.js, payment.js and order.js inside where we'll be having our state, actions, mutations and getters which will be exported.




export const state = () => ({
})
export const mutations = {
}
export const actions = {
}
export const getters = {
}




SETTING UP state, actions, mutation and getters
Inside our namespaced file we'll create our state which should always be a function.



// State
export const state = () => ({
paymentMethods: [],
})


Mutations, actions and getters will be exported as an object




// Mutation
export const mutations = {
SET_PAYMENT_METHODS(state, payload) {
state.paymentMethods = payload
},
}
// Action
export const actions = {
async fetchPaymentMethods({commit}) {
try {
let response = await pay(this.$axios).fetchPaymentMethods()
// we commit the incoming data so as to update the state data
commit('SET_PAYMENT_METHODS', response.data.data)
} catch (error) {
}
},
}
// Getter
export const getters = {
getPaymentMethods: (state) => state.paymentMethods,
}




ACCESSING STORE DATA IN OUR COMPONENT

Firstly to access store data in our component we need to import vuex inside the script tag


<script>
import {mapGetters} from "vuex"
</script>


to access a data from the store state or getter we'll do the following in our computed property



computed: {
// getters
...mapGetters({
// getPaymentMethods we created in the getter above
paymentMethods: 'payment/getPaymentMethods',
}),
// state
paymentMethods(){
return this.$store.state.payment.paymentMethods
}
},





** EXECUTING ACTIONS AND MUTATIONS**





this.$store.dispatch('payment/fetchPaymentMethods')
this.$store.commit('payment/SET_PAYMENT_METHODS')





** SUMMARY **




So far, we've seen practical examples of how to setup Nuxt project, work with vuex in our Nuxt project and enjoy the out of box vuex setup.
We still have some other interesting features which we'll be sharing together, stick around for more.
I hope you find this post helpful and if you do, you can follow me on Twitter

Filtering Data Di Vue

https://dev.to/medan_in_code/filtering-data-di-vue-e94
Tutorial kali ini akan membahas bagimana jika kita ingin memfilter data dengan vue.Karena disini kita akan menggunakan directive v-for dan v-if ada baiknya teman-teman membaca dahulu disini.

Percabangan Di Vue Js


Perulangan Di Vue Js
Misalnya kita punya data seperti dibawah ini.



products:[
{
name:"dress zara",
gender:"wanita",
size:"S"
},
{
name:"baju offwhite",
gender:"pria",
size:"L"
}
]


Kita akan mencoba memfilter data yang akan tampil berdasarkan jenis kelamin.Disini kita akan menggunakan beberapa cara.

v-if
computed
methods




Menggunakan v-if

Untuk penggunaan dengan v-if kurang lebih seperti kode dibawah ini.



<h1>Pakaian pria</h1>
<ul>
<li v-for="product in products" v-if="product.gender==='pria'">
{{ product.name }}
</li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
<li v-for="product in products" v-if="product.gender==='wanita'">
{{ product.name }}
</li>
</ul>


Bisa dilihat pada code diatas kita cukup menambahkan v-if dengan kondisi jika object dengan key gender sesuai dengan jenis kelamin yang kita tentukan.
Maka akan didapatkan hasil seperti dibawah ini.




Menggunakan properti computed

Untuk penggunaan dengan properti computed bisa dilihat pada kode dibawah.



data: () => {
return {
products: [
{
name: "dress zara",
gender: "wanita",
size: "S"
},
{
name: "baju offwhite",
gender: "pria",
size: "L"
}
]
};
},
computed:{
produkPria:function(){
return this.products.filter(function (data) {
return data.gender === 'pria'
})
},
produkWanita:function(){
return this.products.filter(function (data) {
return data.gender === 'wanita'
})
}
}


Jika dilihat di kode diatas kita membuat dua buah fungsi masing-masing untuk memfilter data berdasarkan jenis kelamin.
Untuk htmlnya sendiri bisa dilihat dibawah,kita langsung membuat v-for berdasarkan fungsi yang terdapat pada properti computed.



<h1>Pakaian pria</h1>
<ul>
<li v-for="product in produkPria">
{{ product.name }}
</li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
<li v-for="product in produkWanita">
{{ product.name }}
</li>
</ul>





Menggunakan properti methods

Dengan properti methods kita bisa membuat untuk kasus diatas menjadi 1 fungsi saja.Berbeda dengan computed karena computed memiliki parameter.



data: () => {
return {
products: [
{
name: "dress zara",
gender: "wanita",
size: "S"
},
{
name: "baju offwhite",
gender: "pria",
size: "L"
}
]
};
},
methods: {
pakaian: function(gender) {
return this.products.filter(function(data) {
return data.gender === gender;
});
}
}


Pada kode diatas isi fungsi kurang lebih sama seperti yang kita gunakan pada parameter hanya berbeda di parameter.Untuk datanya kita berikan sesuai dengan parameter.
Untuk htmlnya seperti dibawah ini.



<h1>Pakaian pria</h1>
<ul>
<li v-for="product in pakaian('pria')">{{ product.name }}</li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
<li v-for="product in pakaian('wanita')">{{ product.name }}</li>
</ul>


Kita cukup memanggil methods tersebut di v-for dengan parameter gender.
Sekian dulu pembahasan mengenai filtering data,jika ada yang kurang dipahami,silahkan tanyakan dibawah.

How To Install Vue 3 in Laravel 8 From Scratch

https://medium.com/techvblogs/how-to-install-vue-3-in-laravel-8-from-scratch-908b78b63ce?source=rss------vuejs-5
Nov 19, 2021, Originally published at techvblogs.com ・4 min readContinue reading on TechvBlogs »

VueJS — Neden Composition API

https://ali-menekse.medium.com/vuejs-neden-composition-api-76f2dbb83434?source=rss------vuejs-5
Vue projelerinde kod büyükdükçe fonksiyonları yeniden kullanmak ve bunların okunabilirliğini sağlamak için daha fazla dikkat ve code…Continue reading on Medium »

Why Composition API in VueJS?

https://ali-menekse.medium.com/why-composition-api-in-vuejs-b0fc39bbf7ce?source=rss------vuejs-5
We need time to code review, refactoring, and readable/clear code when your application scale increases. We use Mixins for reusable…Continue reading on Medium »

How to seperate DEV and PROD Firebase Projects in NUXT 🔥

https://dev.to/peterf2170/how-to-seperate-dev-and-prod-firebase-projects-in-nuxt-368k
Just as easy as deploying a NUXT SSR App using Vercel is the implementation of DEV and PROD environments for 2 different firebase Projects.
First TODO is to create seperate projects in Firebase. I named mine project-dev and project-prod.
In your nuxt.config.js, all you have to add is the following env attribute:



export default {
env: {
NODE_ENV: process.env.NODE_ENV
},


In your firebase.js or .ts file, you have to create 2 seperate config variables for the 2 firebase projects.



const configDev = {
apiKey: 'verysecret',
authDomain: 'project-dev.firebaseapp.com',
projectId: 'project-dev',
storageBucket: 'project-dev.appspot.com',
messagingSenderId: 'verysecret',
appId: 'verysecret',
measurementId: 'verysecret'
};
const configProd = {
apiKey: 'verysecret',
authDomain: 'project-prod.firebaseapp.com',
projectId: 'project-prod',
storageBucket: 'project-prod.appspot.com',
messagingSenderId: 'verysecret',
appId: 'verysecret'
};
let firebaseApp;
if (!getApps().length) {
if (process.env.NODE_ENV === 'development') {
firebaseApp = initializeApp(configDev);
} else {
firebaseApp = initializeApp(configProd);
}
}


Thats it. As easy as it could be. Developing on localhost will now use the dev Firebase project, deploying it (for example on vercel) will automatically change the project to project-prod.
If you just added a new Firebase PROD Project, you will have to activate your features (Firestore, Auth, ...), then it should work just as the DEV project.

Creating Data Tables with Vuetify

https://javascript.plainenglish.io/creating-data-tables-with-vuetify-fc5d3d810f11?source=rss------vuejs-5
Learn to create data tables with VuetifyContinue reading on JavaScript in Plain English »

Django-Vue.js ile SSE(Server-sent events) Kullanımı

https://burakgocer.medium.com/django-vue-js-ile-sse-server-sent-events-kullan%C4%B1m%C4%B1-f2eae0b2d874?source=rss------vuejs-5
Bu yazıda Django ve Vue.js teknolojileri kullanılarak temel düzeyde server ile client arasında anlık veri aktarımı için kullanılan SSE…Continue reading on Medium »

Why I prefer the Vue.js framework

https://medium.com/@mazraara/why-i-prefer-the-vue-js-framework-9fd88615087b?source=rss------vuejs-5
A few years ago, we decided to use Vue.js as the standard framework for all front-end development of web applications. There are many…Continue reading on Medium »

ELI5: Reactivity in Vue 3

https://dev.to/morgenstern2573/eli5-reactivity-in-vue-3-4o40
Reactivity. It's a popular buzzword. It's also one of the most convenient features of front-end frameworks.

What is it exactly, and how does it work in Vue 3?



Prerequisite Knowledge


Basic JavaScript and JS objects
Basic knowledge of Vue.js




What is reactivity?


Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner.

Vue 3.x documentation
We say a value is reactive when it can update itself in response to changes in values it depends on. What do we mean by depends on? Let's take an example.



let val1 = 2
let val2 = 3
let sum = val1 + val2


The value of sum is always determined by the values of val1 and val2, so we say that sum depends on val1 and val2.
What happens to sum when one of the values it depends on changes? In regular JavaScript, it stays the same.



console.log(sum) // 5
val1 = 3
console.log(sum) // Still 5


But if sum was reactive,



console.log(sum) // 5
val1 = 3
console.log(sum) // Sum is 6!


The value of sum would change in response to the change in a value it depended on.



What does Vue need to make a value reactive?

Vue needs to know:

what dependencies that value has.
when those dependencies change.

Vue also needs to be able to re-calculate values when their dependencies change.



How Vue knows when dependencies change

Vue wraps the data object of all components with an ES6 Proxy.

A proxy is an object that wraps a target object.
This is important because all reactive values depend (directly or not) on the properties in a component's data object.
Proxies allow you to intercept all requests to get or set properties of the target. They also let you run any code in response to those requests.
Thanks to this, when code attempts to change one of the properties of a data object, Vue intercepts it and is aware of it.
Vue can then re-calculate any functions that depend on that value. But how does Vue know which functions depend on which values?



How Vue knows which dependencies belong to a value

To make our value reactive, we need to wrap it in a function. Using sum to illustrate again:



// we need to go from
let val1 = 2
let val2 = 3
let sum = val1 + val2
// to
const updateSum = () => {
sum = val1 + val2
}


Vue then wraps all such functions with an effect. An effect is a function that takes another function as an argument. Vue then calls the effect in place of that function.
When Vue calls an effect, the effect:

Records that it's running.
Calls the function it received as an argument.
Removes itself from the list of running effects after the function ends.

Remember all source values come from a Proxy (the data component)? While executing the function it wraps, the effect will need a property from the data object, and try to read it.
The Proxy will intercept that read request. Vue checks which effect is currently running. It then records that the effect depends on the property it tried to read. This is how Vue knows which values depend on which properties.



So how does Vue know when to re-run the functions that return dependent values?

The answer is once again the magic of Proxies. Proxies can intercept requests to set property values too.
Remember we now have a record of effects, as well as the values they depend on. When the value of a property in data changes, Vue needs to do one thing: check that record and update the source value.
Vue can then re-run all the effects that depend on it, and thus update the values.



Conclusion

This article is a simplified overview of how reactivity works in Vue 3. If you'd like to read more on the subject, here are some resources:

Understanding the New Reactivity System in Vue 3
Reactivity in Depth

Configurando Teste Unitário no VueJS + Jest

https://dev.to/franciscobressa/configurando-teste-unitario-no-vuejs-jest-3dk6
1. Adicione Jest ao seu projeto

Rode o seguinte comando dentro do diretório de seu projeto



vue add unit-jest


2. Scripts

Para rodar os testes adicione os seguintes comandos nos Scripts de seu package.json



"test:unit": "vue-cli-service test:unit",
"test:watchAll": "jest --verbose --watchAll",


3. Configure as Extensões que seus módulos usarão

Adicione em seu package.json



"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
}


4. Mapear os caminhos

Adicione os mapeamentos que precisar na opção moduleNameMapper em seu jest.config.js



module.exports = {
preset: '@vue/cli-plugin-unit-jest',
moduleNameMapper: {
"@themeConfig(.*)": "<rootDir>/themeConfig.js",
"@core/(.*)": "<rootDir>/src/@core/$1",
"^@/(.*)$": "<rootDir>/src/$1"
}
}


5. Ignorar arquivos

Em seu jest.config.js a opção transformIgnorePatterns ignorará todo tipo de arquivo que coincidir com o padrão regexp. Como por exemplo:



module.exports = {
preset: '@vue/cli-plugin-unit-jest',``
transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)'],
}

Creating A Map With Markers In VueJs

https://nikakharebava.medium.com/creating-a-map-with-markers-in-vuejs-22d9eb44c556?source=rss------vuejs-5
In this article, we will take a look at how we can create a map component in VueJs using a free plugin.Continue reading on Medium »

Implement different types of sliders using Vue 3 and Swiper 7

https://blog.canopas.com/ifferent-types-of-sliders-using-vue-3-and-swiper-7-f6dc10a3eeed?source=rss------vuejs-5
Using swiper.js, we can integrate eye-catching sliders in different javascript frameworks like Vue, angular, react, etc. It includes many…Continue reading on Canopas Software »

Vue 3 + Vite + Quasar issue

https://dev.to/ingsm/vue-3-vite-quasar-issue-2945
Namaste to everybody!;)
I would like to share with you one issue that i had today with my set-up of Vue, Vite and Quasar. The issue is small and it won't get much of your time and I hope it would be useful for somebody
I had troubles with default Quasar prebuild icons. Built a dev server I received an error:

The request url "D:/projects/Webware/Current/vite-vue-quasar/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu92Fr1Mu4mxM.woff" is outside of Vite serving allow list.

I had the following vite.config.js structure:



import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
// https://vitejs.dev/config/
export default defineConfig({
server: {
fs: {
// Allow serving files from one level up to the project root
}
},
plugins: [vue({
template: { transformAssetUrls }
}),
quasar({
sassVariables: '@/assets/styles/quasar-variables.sass'
})
],
resolve: {
alias: {
'@/': `${path.resolve(__dirname, 'src')}/`
}
}
})


The tip here is that that from Vite v2.7 server strict mode is set to true by default and it restricts serving files outside of workspace root.
Link to official docs: https://vitejs.dev/config/#server-fs-strict
Below you can find an option to solve this problem with enabled strict mode, but I just turn the strict mode off.



export default defineConfig({
server: {
fs: {
// Allow serving files from one level up to the project root
strict: false,
}
},


Thank you for reading and I'm eager to hear if my decision is not right enough;)