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)

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

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

A picture is worth a thousand words. Here's what we're going to build today.
Astronomy of the Day Gallery
In Part 1, we learned how to set up our development environment, and in Part 2, we learned how to customize the template for the Nasa Demo application. In this article, we will be going over the steps on how to deploy the application to the internet so your friends can see it too!
Bonus: Onrender hosting for the static site is free with less than 400 build hours per month. 😄



Table of Contents



Register with Onrender Hosting Services
Deploy Application to Onrender




Register with Onrender Hosting Services




1. Sign up with Onrender

Go to onrender to register a new account with onrender.


For this tutorial, I simply used my Github account to register with onrender.



Deploy Application to Onrender




1. Sign in to Onrender

Come back to onrender with your account, and you should see the dashboard.



2. Provide Github Repo

Click on the "New +" button on the top navigation bar and click on "Static Site" to create a new site.


You should see a field for your GitHub repository that contains the latest version of the Application. Copy the URL for the Github repository and paste it into this field in onrender.





3. Set Up Onrender Workflow

Enter the following:

Name: nasa-demo-devto

Branch: gallery
Build Command: yarn build

Publish directory: dist


Open up the Advanced toggle to add environment variable.

Name: VUE_APP_API_KEY

Value: <insert_NASA_API_key_here>


See Part 1 to find out how to get the NASA API key.

Finally click on "Create Static Site" button at the end of the form!





4. Go to Your Live Site!

The build should be successful.


Your live site should look something like this one here. 😄



Article Series

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)

How To Pass The Data Between The Components In VueJs

https://nikakharebava.medium.com/how-to-pass-the-data-between-the-components-in-vuejs-32a70cb57639?source=rss------vuejs-5
How to communicate between the components in Vue.Continue reading on Medium »

Product Catalog Web App with Flask, Vue and Mongo

https://dev.to/valentinesean22/product-catalog-web-app-with-flask-vue-and-mongo-3723
Overview of My Submission

Product Catalog web app is a simple catalog where user named Supplier will create products and Customer will browse these products on the platform.
The product has few information such as product name, category of the product, supplier of the product, to mention only 3.
Customer can search based on product name, category name or first name of the supplier (this is done by Flask with Atlas Search). After receiving search results, they can also filter those search results (This is done by Vue in the browser).
ROLES SUMMARY: Supplier -> (creates product); Customer -> (search among products, rate the product)
I built the app using Flask, Vue and MongoDB. Vue is responsible for displaying data stored in MongoDB to users and Flask is serving as an interface between MongoDB and Vue. Products' images are stored in Cloudinary using its public API.



Submission Category:


E-Commerce Creation




Link to Code


Flask API link: https://github.com/ValentineSean/product-catalog-api
Vue App link: https://github.com/ValentineSean/product-catalog-app




Additional Resources / Info


App demo Youtube link: https://youtu.be/DPZ_p9JU5SU

App link: https://product-catalog-vsc.netlify.app/

suppliers credentials: ["[email protected]", "[email protected]"]
customers credentials: ["[email protected]", "[email protected]"]
all passwords are "123456"




Database structure and indexes images:

Don’t work update state in Vue.js.

https://dev.to/hachidori/dont-work-update-state-in-vuejs-105l
I was really worried don’t work update state in Vue.js.

Please return my day.
This reason was key for v-for.
Test Page Component have array in state.

It give Test Component with v-for.

After that update its state.
Then doesn’t work to update state in Test Component, if you wrong to set key.
If you update state, update key for component.



<template>
<div>
<Test v-for="e in state.testElements" :key="e.value" :data="e" />
<Test v-for="(e, i) in state.testElements" :key="i" :data="e" />
</div>
</template>

<script lang="ts">
import { defineComponent, reactive } from '@nuxtjs/composition-api';
import Test from './Test.vue';
interface A {
value: number;
}
export default defineComponent({
components: {
Test,
},
setup() {
const state = reactive<{ testElements: A[] }>({
testElements: [{ value: 1 }, { value: 2 }, { value: 3 }],
});
setTimeout(() => {
state.testElements = [{ value: 4 }, { value: 5 }, { value: 6 }];
}, 5000);
return {
state,
};
},
});
</script>



<template>
<div>
<p>direct refer to props = {{ data.value }}</p>
<p>define in setup function = {{ v }}</p>
</div>
</template>

<script lang="ts">
import { defineComponent, PropOptions } from '@nuxtjs/composition-api';
interface Data {
value: number;
}
export default defineComponent({
props: {
data: {
type: Object,
} as PropOptions<Data>,
},
setup(props) {
return {
v: props.data.value + 1,
};
},
});
</script>

A Penny for Your Thoughts – Our Community Sponsorship Program is Live!

https://dev.to/vue-storefront/a-penny-for-your-thoughts-our-community-sponsorship-program-is-live-5cgc
The time has come to finally announce Vue Storefront Community Sponsorship Program. Yes, you heard it right, ops, read it right. We want to sponsor our most active community members and projects in this program.
The idea behind this program is to embrace our community and valorize our top contributors in the Vue Storefront ecosystem. We want you to have the opportunity to be sponsored to do what you like and be able to produce much more.
Also, this will help with all those questions you may get in your house about coding for free 🙂  Now, you contribute and get paid.
When this program was initially conceived, we wanted to make sure everyone in our community could be eligible one day. That's why we are not only sponsoring developers but also are sponsoring projects.



I want to apply for the sponsorship. What should I do?

To apply for our sponsorship program, first, you must be involved in the Vue Storefront ecosystem. Having a project like an integration, extension, or module for Vue Storefront or being an active developer in our community or core project. Then you can fill up this form to start your application process.



Is it possible to apply from a project outside the Vue Storefront ecosystem?

Unfortunately, we only accept applications from projects and developers that are a part of the Vue Storefront ecosystem. This does not mean that we will not sponsor developers and projects outside our ecosystem in the future.



Does the sponsorship cover all countries?

We currently only sponsor developers and projects that belong to the GitHub sponsorship program or have an active Patreon sponsorship account.
We know that this program will bring a lot of questions, like "How do I apply for the program?", "What are the pre-requisites?" and so on. To help you with all those questions, we prepared a document with some of them.

Up & Running with Vuetify in 5 Minutes using BANanoVuetifyAD3

https://mbanga-anele.medium.com/up-running-with-vuetify-in-5-minutes-using-bananovuetifyad3-badde1c6b79b?source=rss------vuejs-5
Hi thereContinue reading on Medium »

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 »