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 »

A dev's dillema: Vue vs React

https://dev.to/swimm_io/a-devs-dillema-vue-vs-react-1556
Why Vue?


Vue is lightweight & flexible and it feels more like a library than a framework
It's also less intrusive and has an easy onboarding experience
Project components & structure in Vue are similar and easy to recognize. This especially helps with onboarding.
READABILITY !!!! The html/css and JS are separated.




When React > Vue


React is an industry standard and oftentimes this makes it easier to recruit developers
React often provides better flexibility in some aspects
Docs are far more advanced. Check out the 100s of pages of questions on React on Stackoverflow

This all started with an email we received a while back asking why Swimm chose Vue.


Do you have this dilemma? Where do you stand?

An RPG in VUE.JS Vol. 3 (Main Battle Interface)

https://davidj-fertitta.medium.com/an-rpg-in-vue-js-vol-3-main-battle-interface-cce6e963acff?source=rss------vuejs-5
Ok, so it’s been a while since I posted one of these, but I had some time and thought I could start to catch this series up to where I…Continue reading on Medium »

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)

https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-1-of-3-132a
Project Debriefing

A picture is worth a thousand words. Here's what we're going to build today.
Astronomy of the Day Gallery
This website is powered by Vue.js (Vue 3) and a fun API provided by NASA. When you call the NASA API, it will return a beautiful picture of our universe, with some additional information like title and description (...and copyright - always acknowledge the source 🙄).
OK, so let's get right into it!



Table of Contents


Prerequisites
Set Up




Prerequisites


Say to yourself, "you can do it!" 3x
Pet a dog when you see one (or cat, or small human).
Install VS Code (or any code editor of choice). And here's a really nice detail on how to set up VS Code for Vue JS development.
Install NPM

Install Vue CLI (Note: In order to use the CLI, you’ll need to have Node.js version 8.9 or above.)
Get NASA API Key. It's free!

Optional: Get a GitHub account so you can use the Github account code repository (aka 'repo') later to host your website online if you choose to do so.

Note: If you want to go straight to coding the Vue app, you can skip the rest of Part 1 (Set Up section below). But before you move on to Part 2, first clone the starter template repo to your local computer (git command below).



git clone https://github.com/stoic-llama/nasa-demo-devto.git





Set Up



Create vanilla vue app from your terminal with Vue CLI. Type vue create nasa-demo-devto in the terminal and click enter.


vue create nasa-demo-devto



Follow the wizard of the Vue CLI and provide the following answers to finish the set up of the vanilla vue app.

a. Select Manually select features

b. Select Router

c. Select 3.x

d. Type in y

e. Select ESLint + Prettier

f. Select Lint on save

g. Select In package.json

h. Select n
The final configuration responses from you should be like so below.




Once you let the Vue CLI create the template vanilla vue app, you should get a success message like this. (Note the emojis 😄.)


🖊️ Tip: Somewhere in the installation process the Vue CLI may ask for you to create node_modules folder. Click yes.


Now in your terminal type


npm run serve

and it should start up the vue app!




Optional: Push your source code to Github. You can use this repository on Github later for hosting a website for your app.

a. Create a repo under your Github account and call it nasa-demo-devto.

b. Type in the follow Git commands to push your local files up to Github repository online. (You may have noticed that I added an initial commit. This was done so I could include the .gitignore file that was added as part of the set up process in prior steps.)


git remote add origin https://github.com/<_your_Github_account_name_>/nasa-demo-devto.git
git branch -M main
git add .
git commit -m "Initial Setup"
git push -u origin main

c. Finally you should be able to see the success message that your code was pushed to Github.







Article Series

Click on Part 2 to start coding the application!
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 2 of 3)

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)