Exploring the Front-end Ecosystems by Numbers

https://abimaelbarea.medium.com/exploring-the-front-end-ecosystems-by-numbers-a19a90b2a73b?source=rss------vuejs-5
A deep comparison of Angular, React, and Vue.Continue reading on Medium »

Nuxt 3 + Apollo Client

https://dev.to/joshwcorbett/nuxt-3-apollo-client-h6
If you're working on a Nuxt 3 project, and trying to get Apollo up and running, only to find that the nuxt module isn't updated yet for v3, then follow along.
As of late 2021 and early 2022, the Nuxt Community Apollo module is still in limbo for an update to play along with Nuxt 3, and I'm not patient enough to wait many more months for that. The question of why I'm bothering with Nuxt 3 this early on, is irrelevant, I merely just want to play around with it.
This is an extremely minimal demonstration, and should by no means be used for production without extra configuration.
Assuming you already have a Nuxt 3 project ready, let's move on to step 1.



Part 1: Installing the Dependencies

We'll use both @apollo/client and vue-apollo which is updated to work with Vue 3, and therefore willl work fine inside our Nuxt 3 project.



yarn add vue-apollo @apollo/client graphql





Part 2: Creating the Plugin

If you don't already have a plugin folder in your root directory, make one and create a js file inside to represent your Apollo Client



root/
- components/
- api/
- pages/
- plugins/ <--
- apollo-client.js <--
- etc...


apollo-client.js



import { defineNuxtPlugin } from "#app"
import { ApolloClient, InMemoryCache } from "@apollo/client/core"
import { DefaultApolloClient } from "@vue/apollo-composable"
export default defineNuxtPlugin((nuxtApp) => {
const apolloClient = new ApolloClient({
cache: new InMemoryCache()
// configuration //
})
nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
})





Part 3: Configuration

To keep things secure, I recommend using environment variables to store your api keys and credentials.
.env



API_ENDPOINT="https://your-api.com"


In our apollo-client.js file, populate your config with



const apolloClient = new ApolloClient({
cache: new InMemoryCache(),
uri: process.env.API_ENDPOINT <-- add your uri
// other configuration
})


You can read up on ways to configure your apollo client here: https://www.apollographql.com/docs/devtools/apollo-config/



Part 4: Nuxt Configuration

Almost nothing needs to be done here, Nuxt automatically imports your javascript files located in the plugins/ folder. We do still need to add to our build config.
In our build config in nuxt.config.js:



build: {
transpile: [
'@apollo/client',
'ts-invariant/process',
],
},


If you do not add @apollo/client and ts-invariant/process into transpile, you will face an error.



Part 5: Using Apollo

I've created a query in our api/folder called queries.js



import { gql } from "@apollo/client/core"
export const GET_POSTS = gql`
query posts {
posts (first: 20) {
id
title
}
}
`


In our Vue file, let's import useQuery from vue-apollo



import { useQuery, useResult } from '@vue/apollo-composable'
import { GET_POSTS } from '@/api/queries'
const { loading, result } = useQuery(GET_POSTS)





Conclusion

This is merely just a minimal demonstration of how to get apollo up and running with your Nuxt 3 project, not a fleshed out or production-ready solution. If you'd like to have a more official solution that doesn't involve creating your own plugin, either wait for Nuxt 3 support on the official Apollo Nuxt Module, or check out this module I found on Github.



Thanks for Reading

I hope this was helpful.

Learn how to set up Vue with Tailwind CSS and Flowbite

https://medium.com/themesberg-blog/learn-how-to-set-up-vue-with-tailwind-css-and-flowbite-a3e46835e686?source=rss------vuejs-5
Vue.js is a popular front-end library used by websites such as Behance, Nintendo, Gitlab, Font Awesome, and more that you can use to build…Continue reading on Themesberg Blog »

Customizing the Apostrophe Admin UI

https://apostrophecms.medium.com/customizing-the-apostrophe-admin-ui-e2d5e1929d3b?source=rss------vuejs-5
This guide focuses on how to customize Apostrophe’s administrative user interface, or “admin UI.” The built-in functionality covers most…Continue reading on Medium »

Improve $destroy performance in Vue

https://dev.to/przemyslawjanpietrzak/improve-destroy-performance-in-vue-1o5f
Introduction

Vue in most of the cases is a fast enough framework. However, the time of nodes destruction can be very long. Of course removing elements from DOM is fast operation but Vue needs to remove all watchers from destruct component and that may take up to several seconds.



Case

Component with nested navigation with 12 groups each has ~20 children. After opening all groups, navigation has ~240 items. After user tries to navigate to another view browser freezes for a couple of seconds.



Navigation
- Group x12
- Item x20





Investigation

Open chromium dev tools, go to the performance section and set CPU: 4x slower after that browser will behave as on an average user computer.

Then record the destruction of navigation. The result:

Oh my God almost 7 seconds of destroy and 0.65 s of update (before destroy) o.O

In the main $destroy there’s many shorter $destroys and all of them have many removeSub calls. Each of removeSub takes 7–15 ms, not much but in total it’s much time of browser freeze.



Reason

Component Item.vue is bind to 5 high order vuex getters was rendered around 240 times.



// Item.vue
...mapGetters('namespace', [
'getA',
'getB',
'getC',
'getD',
'getE',
});


Also Item.vue has 8 computed properties and 5 of them use vuex getters. All this operations are not expensive, however create many subscriptions. And these subscriptions have to be cleared.



Solution

Moving all computed props and vuex bindings from Item.vue into Group.vue . Group.vue is rendering many Item.vues so we have to map collection of item like this:



Result


Time of $destroy reduced from ~7s to 0.3s (-96%). Also update before it wad reduced from 0.65s to 0.45 (-30%). Notice that is not a perfect solution: because mapper should move to Navigation.vue add pass Group.vue as prop. However moving calculation of a, b, c, d, e will “only” reduced bindings by 55 (12 * 5 – 5). This performance is not great but not terrible.



Conclusion

In vue loading data from store to component is pretty easy: just ...mapGetters('namespace', ['getter']), but not all components should know about the store. Before React’s hooks was very popular to write container that connect data from Redux by mapStateToProps and mapDispatchToPros with a component. It was a lot of boilerplate and thank goodness we can use now useReducer however it has one advantage: get the developer to think about where to put the connection with store. In my opinion we still must care about it because separation of components into logic and presentation is important not only to keep code clean but also for performance purposes.

You Shouldn’t be Using Mixins in Vue.js Anymore

https://javascript.plainenglish.io/you-shouldnt-be-using-mixins-in-vue-js-anymore-ec8c09824f9f?source=rss------vuejs-5
Use the Composition API to migrate from MixinsContinue reading on JavaScript in Plain English »

Add Firebase To Your Vue JS App

https://dev.to/hirajatamil/add-firebase-to-your-vue-js-app-gi
In this Vuejs tutorial, You’re going to learn how to add Firebase to your Vue JS 2 web app in minutes with STEP by STEP instructions.






Create Vue JS Project using Vue CLI




STEP 01: First you need to install Node.js & NPM (Node Package Manager) onto your computer if you haven’t done so already.
Check to see if you have installed node with the following command on the Terminal / Command Prompt:



node -v


STEP 02: Install vue using vue cli globally (-g) which is the easiest way to get started with Vue.



npm install -g vue-cli


STEP 03: Initialize Vue Project via Web Pack with the following command and change my-project to your project name.



vue init webpack my-project


Next, you will be asked a series of questions:


Project name (yourprojectname) – The name must be URL friendly (no space)

Project description (A Vue.js project)

Author (SoftAuthor)

Vue build (Use arrow keys) ❯ Runtime + Compiler: recommended for most users


Install vue-router? (Y/N) ❯ Yes

Use ESLint to lint your code? (Y/N) ❯ No

Set up unit tests (Y/N) ❯ No

Setup e2e tests with Nightwatch? (Y/N) ❯ No

Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) ❯ Yes, use NPM

Once you hit enter, it will start downloading and installing dependencies which will take a minute or two.
After that cd to your project.



cd yourprojectname


Then,



npm run dev 


At this stage, your project will be compiled and Vue will give you the localhost address. Go ahead and launch it on the browser.
If you already have a Gmail account, go to the Firebase Console and log in.
Once you have logged in, you will see the project explorer window like the image below.

⚠️ It may look a bit different depending on when you read this article.




Choose Add Project Button





Create project name of your choice and click continue

Continue Reading

Laravel Inertia Vue Movie App | Display Tags | Laravel 8 Tutorial

https://dev.to/laravellercom/laravel-inertia-vue-movie-app-display-tags-laravel-8-tutorial-12p9
Watch the Video Hire: Youtube

Perulangan Di Vue Js

https://dev.to/medan_in_code/perulangan-di-vue-js-1j0a
Tutorial kali ini akan membahas bagaimana menggunakan perulangan di vue.
Untuk melakukan ini di vue kita menggunakan directive v-for.



Menampilkan data array

Misalnya kita punya data array nama-nama siswa



siswa: ["budi","andi","caca"]


atau jika menggunakan struktur vue akan seperti ini.



export default {
name: "App",
data: () => {
return {
siswa: ["budi","andi","caca"]
};
}
};


Data tersebut akan kita tampilkan menggunakan v-for.Maka template vue nya akan menjadi seperti ini



<ul>
<li v-for="nama in siswa">
{{ nama }}
</li>
</ul>


Kita menggunakan html list untuk menampilkan nama siswa.Bisa dilihat kita melakukan perulangan dengan variable siswa dan nama sebagai alias untuk item satuan.Kemudian karena ini hanya array kita langsung mencetak dengan seperti dibawah ini.



{{ nama }}



Kita juga bisa menampilkan index dari masing-masing data tersebut dengan menambahkan kode seperti dibawah.



<ul>
<li v-for="(nama,index) in siswa">
{{index+1}}.{{ nama }}
</li>
</ul>


Index diawali dari 0 jadi kita menambah 1 ketika mencetak.Maka akan keluar hasil seperti dibawah ini.




Menampilkan data object

Sebenarnya cara sama saja menampilkan data object ataupun array dengan v-for
Jika kita punya data seperti dibawah ini.



siswa : {
nama:'budi',
kelas:'XII-A',
jurusan:'RPL'
}


Kode template sama saja



<ul>
<li v-for="value in siswa">
{{ value }}
</li>
</ul>


Kita juga bisa menampilkan key dari object sebagimana index dari array sebelumnya.



<ul>
<li v-for="(value,key) in siswa">
{{key}} : {{ value }}
</li>
</ul>


Maka akan mendapatkan hasil seperti dibawah ini.

Di object kita bisa menambahkan satu parameter lagi yaitu index sehingga menjadi seperti ini.



<ul>
<li v-for="(value,key,index) in siswa">
{{index+1}}. {{key}} : {{ value }}
</li>
</ul>






Menampilkan Data Collection

Jika kita mendapatkan data dari api backend,seringkali data yang didapatkan berbentuk collection atau array object atau berformat data JSON.
Misalnya seperti data dibawah.



siswa : [
{
nama:'budi',
kelas:'XII-A',
jurusan:'RPL'
},
{
nama:'andi',
kelas:'XII-B',
jurusan:'TKJ'
},
{
nama:'caca',
kelas:'XII-A',
jurusan:'RPL'
}
]


Kita akan menampilkan kedalam html tabel.Maka kode v-for untuk table kurang lebih seperti dibawah ini.



<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
<th>Jurusan</th>
</tr>
<tr v-for="(data,index) in siswa">
<td>{{index+1}}</td>
<td>{{data.nama}}</td>
<td>{{data.kelas}}</td>
<td>{{data.jurusan}}</td>
</tr>
</table>


Kenapa kita meletakkan v-for di tr,karena tr lah yang akan kita looping sebanyak data siswa.data.nama berarti kita memanggil key nama dari variabel data yang sudah jadi objek dari perulangan siswa.



Attribut v-bind:key

Attribut ini bisa juga dipanggil hanya dengan :key.Jika kita menggunakan v-for maka vue menyarankan kita harus menggunakan attribute ini,di IDE apalagi yang menggunakan syntax linter ,akan menunjukan warning di baris kodenya jika kita tidak menambahkan key saat pakai v-for.Attribute ini berperan sebagai penanda unik ,kayak primary key lah kalau di database,agar vue bisa melakukan tracking perubahan setiap tag html saat dirender.
Asal dari :key ini bisa dari index dari array,key atau properti dari object.
Contohnya :



<ul>
<li v-for="(value,index) in siswa" v-bind:key="index">
{{index+1}}. {{ value }}
</li>
</ul>


atau jika kita punya object yang memiliki attribute unik.



siswa : [
{
id:1,
nama:'budi'
},
{
id:2,
nama:'andi'
}
]


Maka kode htmlnya bisa seperti dibawah ini.



<ul>
<li v-for="(data,index) in siswa" v-bind:key="data.id">
{{index+1}}. {{ data.nama }}
</li>
</ul>


Sampai sini dulu pembahasan mengenai penggunaan v-for,silahkan bertanya dibawah jika ada yang kurang dimengerti.

Grouping Tasks | Tabs | Vuetify To-Do List App Tutorial

https://javascript.plainenglish.io/grouping-tasks-tabs-vuetify-to-do-list-app-tutorial-e52633c13e67?source=rss------vuejs-5
Let’s sort the tasks using the Vuetify Tabs componentContinue reading on JavaScript in Plain English »

MongoDB Atlas Hackathon e-commerce with MongoDB

https://dev.to/zaahmednisumcom/mongodb-atlas-hackathon-1jlb
Overview of My Submission

I have create a simple full-text search for products, A user can search a product with right any text on input field and hit search than MongoDB Atlas search do the job for me. User can search on basis of different fields and get the desire recordes.

I also create a simple schedule trigger to get the daily order report which will get all the orders on daily basis and create a single entity for single day and add it in a dailyorderreport schema.



Submission Category:

I have choose E-Commerce Creation & Action Star for my project.



Link to Code

Fronend Repo





zaahmed-nisum-com
/
nisum-vuejs-streamingweb










steamingweb

Build Setup

# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generate

For detailed explanation on how things work, check out the documentation.

Special Directories
You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

assets

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
More information about the usage of this directory in the documentation.

components

The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
More information about the usage of this directory…


View on GitHub

Backend Repo





zaahmed-nisum-com
/
nodeJS-workshop-nisum



Workshop for Node.JS Nisum






nodeJS-workshop-nisum
Workshop for Node.JS Nisum




View on GitHub








Additional Resources / Info

Did't use any
[Note:] # Screenshots/demo videos



App pages urls



full text search page

https://watchnowweb.herokuapp.com/search



today order trigger event

https://watchnowweb.herokuapp.com/orders/todayorders

Percabangan Di Vue Js

https://dev.to/medan_in_code/percabangan-di-vue-js-2j3d
Tutorial kali ini akan membahas penggunaan percabangan di vue.Disini kita akan menggunakan directive v-if,v-if ini sendiri biasa digunakan untuk menentukan apakah suatu element mau dirender atau tidak ,kalau istilah kerennya conditional rendering.
Pada tutorial ini akan dicontoh penggunaan beberapa bentuk :

v-if

v-if dengan v-else


v-if ,v-else-if dan v-else





Contoh penggunaan v-if

v-if pada umumnya kita gunakan jika hanya memiliki satu kondisi yang harus benar.



<div v-if="isShowNama">{{nama}}</div>


Jika variabel isShowNama bernilai false maka element div yang berisi nama tersebut tidak akan dirender ke browser.



Contoh penggunaan v-if dengan v-else

Digunakan jika kita punya 2 kondisi jika tidak sesuai kondisi if,maka akan menjalankan else.



<div v-if="isShowEmail">{{email}}</div>
<div v-else>Tidak ada email</div>


Bisa dilihat pada contoh diatas jika isShowEmail bernilai true maka akan menampilkan nama,jika false maka akan menampilkan Tidak ada email.



Contoh penggunaan v-else-if

Digunakan jika kita memiliki lebih dari 2 kondisi.



<div v-if="nilai >= 75 ">Lulus</div>
<div v-else-if="nilai >= 60 && nilai<75 ">Cukuplah</div>
<div v-else>Kurang</div>


Contoh diatas kita punya 3 kondisi ,lulus,cukup dan kurang.Jika kita masukkan nilai 74 maka akan menampilkan Cukuplah.
Kurang lebih kode lengkap untuk semuanya seperti dibawah ini.



<template>
<div id="app">
<div v-if="isShowNama">{{nama}}</div>
<div v-if="isShowEmail">{{email}}</div>
<div v-else>Tidak ada email</div>
<div v-if="nilai >= 75 ">Lulus</div>
<div v-else-if="nilai >= 60 && nilai<75 ">Cukuplah</div>
<div v-else>Kurang</div>
</div>
</template>
<script>
export default {
name: "App",
data: () => {
return {
nama: "budi",
email: "[email protected]",
isShowNama: false,
isShowEmail: true,
nilai: 64
};
}
};
</script>


Untuk lebih jelas bisa dilihat langsung demo untuk ketiga contoh diatas disini => Demo v-if.
Jika ada kurang dipahami bisa ditanyakan dibawah.

One year of experience with Vue.js

https://kalin-chernev.medium.com/one-year-of-experience-with-vue-js-35187487da84?source=rss------vuejs-5
IntroductionContinue reading on Medium »

Vue.js Interview Challenge — #12 — Toggleable Input

https://medium.com/js-dojo/vue-js-interview-challenge-12-toggleable-input-5aadc286fa3?source=rss------vuejs-5
Problem statementContinue reading on Vue.js Developers »

Vue.js Interview Challenge — #12 — Toggleable Input — Solution

https://medium.com/@m.rybczonek/vue-js-interview-challenge-12-toggleable-input-solution-190a72dcae36?source=rss------vuejs-5
SolutionContinue reading on Medium »

VueJS Datatbales GitHub 2022

https://medium.com/js-dojo/vuejs-datatbales-github-2022-b83314954159?source=rss------vuejs-5
Looking for VueJS Datatable for inspiration? Then here is the best collection of 10+ VueJS Datatables Github.Continue reading on Vue.js Developers »

Vscode Extensions Every PHP/Laravel/Vue.js developer should use

https://medium.com/@mohasin2911/vscode-extensions-every-php-laravel-vue-js-developer-should-use-f6df64e83e23?source=rss------vuejs-5
A fullest of vscode extension for PHP devs to boost coding productivity.Continue reading on Medium »

Recursive Components with Vue.js

https://javascript.plainenglish.io/recursive-components-with-vue-js-c3c49e69955c?source=rss------vuejs-5
A small sample application to visualize the ‘climbing stairs’ problem.Continue reading on JavaScript in Plain English »

Usando no vueJS3

https://dev.to/italobarrosme/usando-no-vuejs3-4co1
No dia a dia do desenvolvimento buscamos sempre escrever menos e entregar mais, no vue3 utilizo do Composition API para buscar alcançar esse objetivo e a um tempo mudei minha abordagem de escrever e definir componentes Vue utilizando da feature <script setup>.

O VueJS 3 introduziu o <script setup>que é um syntax sugar para reduzir a verbosidade no Composition API dentro de componentes de arquivos únicos (SFCs) além de reduzir a verbosidade outros benefícios ele nos traz.

Capacidade de declarar props e eventos emitidos usando TypeScript puro
Melhor desempenho de tempo de execução.
Código mais enxutos com menos clichês

Exemplo de código SEM o <script setup>

Exemplo de código COM o <script setup>

Observe como o mesmo código ficou bem mais enxuto!
Ao usar <script setup>, quaisquer “top-level bindings” (incluindo variáveis e declarações de função) declaradas dentro do <script setup> são automaticamente expostas ao template.

Como também “Importações” podem ser utilizadas diretamente em expressões do template sem precisar expô-la no methods.




Reatividade

O estado reativo precisa ser criado explicitamente, semelhante ao setup()

refs são automaticamente desempacotadas quando referenciados no template




Componentes

Só precisamos importá-los no <script setup>, podem ser usados diretamente como tags no nosso template, é fortemente recomendado o uso de “PascalCase” para manter a consistência. Também ajuda a diferenciar dos elementos personalizados nativos.




Componentes dinâmicos

Como os componentes são referenciados como variáveis, você usa o :is para vinculo dinâmico. Observe que podem ser usadas expressões condicionais.




Components recursivos

Um componente pode se referir implicitamente a si mesmo por meio de seu nome de arquivo em seu template.

Você também pode utilizar o alias da importação.




Diretivas Personalizadas

As diretivas personalizadas registradas globalmente funcionam conforme importadas e as locais podem ser usadas diretamente no template.

Mas há uma restrição a ser observada: você deve nomear as diretivas personalizadas locais de acordo com o seguinte esquema: vNonmeDaDirective para que elas possam ser usadas diretamente no modelo.





Props e emits

Para declaração de props e emits, você de usar o defineProps e defineEmits respectivamente.

O defineProps e defineEmits sao macros do compilador utilizáveis apenas no

<script setup> precisam ser previmente importados.




defineExpose

Componentes usando <script setup> são fechados por padrão.
Para expor explicitamente as propriedades em um <script setup> use a defineExpose que também é um macro.




Ciclo de vida do vue com <script setup>

Podemos registrar os hook de ciclo de vida do componente usando métodos onX , que podemos importar da biblioteca.





Propriedades Computadas

Podemos declarar uma propriedade computada que é atualizada automaticamente sempre, dependendo da propriedade ou dos dados alterados.




Propriedades watches

Podemos reagir a alterações de dados através da opção de watches fornecida pelo Vue. Isso é mais útil quando queremos realizar operações assíncronas ou caras em resposta a alterações.
referências

https://v3.vuejs.org/api/sfc-script-setup.html#basic-syntax



Considerações finais

Agora, com a <script setup> , sinto que meu código esteja mais simplificado, fácil de ler.Essa forma ajuda muito no code review ganhamos tempo. A produtividade vem aumentando de forma consistente, focando no clean code. E com o par com ferramentas como VueUse ou seus próprios /composables essa produtividade só aumenta.
Espero ter ajudado com um pouco de conhecimento a você caro leitor!

y-

Dev Ops Pipelines Kullanarak NUXT Uygulamasını Azure’a Deploy Etmek

https://medium.com/@yavuz.asmali/dev-ops-pipelines-kullanarak-nuxt-uygulamas%C4%B1n%C4%B1-azurea-deploy-etmek-b0d931ede308?source=rss------vuejs-5
NUXT, React için geliştirilen Next.js gibi Vue için geliştirilen ve ismi Next.js den ilham alınarak ortaya çıkmış bir Javascript…Continue reading on Medium »