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 »

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 »