Deploying VueJS with NodeJS Backend on GCP Cloud Run from Cloud Source Repositories
https://medium.com/bb-tutorials-and-thoughts/deploying-vuejs-with-nodejs-backend-on-gcp-cloud-run-from-cloud-source-repositories-6452e51836c?source=rss------vuejs-5
A step by step guide with an example project With Docker RuntimeContinue reading on Bachina Labs »
https://medium.com/bb-tutorials-and-thoughts/deploying-vuejs-with-nodejs-backend-on-gcp-cloud-run-from-cloud-source-repositories-6452e51836c?source=rss------vuejs-5
A step by step guide with an example project With Docker RuntimeContinue reading on Bachina Labs »
How to Add a QR and Barcode Scanner to Your Vue.js App
https://dimoff2000.medium.com/how-to-add-a-qr-and-barcode-scanner-to-your-vue-js-app-545c23f31969?source=rss------vuejs-5
In this blog post, I will show you how to add a QR and barcode scanner to your Vue.js website. This is a great way to increase engagement…Continue reading on Medium »
https://dimoff2000.medium.com/how-to-add-a-qr-and-barcode-scanner-to-your-vue-js-app-545c23f31969?source=rss------vuejs-5
In this blog post, I will show you how to add a QR and barcode scanner to your Vue.js website. This is a great way to increase engagement…Continue reading on Medium »
How to Add a QR and Barcode Scanner to Your Vue.js App
https://dev.to/olefyrenko/how-to-add-a-qr-and-barcode-scanner-to-your-vuejs-app-4c50
In this blog post, I will show you how to add a QR and barcode scanner to your Vue.js website. This is a great way to increase engagement with your users and can be used for a variety of purposes, such as marketing, product identification, and more! We will be using the vue-barcode-reader library for this tutorial, which is a popular option for scanning both QR codes and barcodes. Let’s get started!
Installation
First, we need to install the vue-barcode-reader library. We can do this with npm:
npm install vue-barcode-reader --save
Or yarn:
yarn add vue-barcode-reader
Please note that for projects which use the Vue 2.0 version you need to install the compatible version of the library ([email protected]).
TypeScript
If you are using TypeScript, you will need to install additionally the definitions of the vue-barcode-reader types. There are type definitions available at DefinitelyTyped for those who work with TypeScript.
npm install @types/vue-barcode-reader --save-dev
Or
yarn add -D @types/vue-barcode-reader
Usage
Next, we need to add the library to our project. We can do this by adding it to our Vue component:
import { StreamBarcodeReader } from "vue-barcode-reader";
Now, we need to add a QR or barcode scanner component to our project. We can do this by adding the following code:
<StreamBarcodeReader
@decode="onDecode"
@loaded="onLoaded"
></StreamBarcodeReader>
We should also implement the handlers for decode and loaded events which the library exposes.
onDecode(text) {
console.log(`Decode text from QR code is ${text}`)
},
onLoaded() {
console.log(`Ready to start scanning barcodes`)
}
Now, you can scan QR codes and barcodes in your Vue.js application! Here is an example of a QR code that I scanned:
Demo
You can find the source code of the example application on Github or check it live at Vercel or Netlify. You can also check how vue-barcode-reader library works on the live production website here.
Conclusion
In this blog post, I showed you how to add a QR and barcode scanner capabilities to your Vue.js app. This is a great way to increase engagement with your users, and can be used for a variety of purposes, such as marketing, product identification, and more! I hope you found this blog post helpful. Feel free to ask me any questions in DM on Twitter. Thanks for reading!
https://dev.to/olefyrenko/how-to-add-a-qr-and-barcode-scanner-to-your-vuejs-app-4c50
In this blog post, I will show you how to add a QR and barcode scanner to your Vue.js website. This is a great way to increase engagement with your users and can be used for a variety of purposes, such as marketing, product identification, and more! We will be using the vue-barcode-reader library for this tutorial, which is a popular option for scanning both QR codes and barcodes. Let’s get started!
Installation
First, we need to install the vue-barcode-reader library. We can do this with npm:
npm install vue-barcode-reader --save
Or yarn:
yarn add vue-barcode-reader
Please note that for projects which use the Vue 2.0 version you need to install the compatible version of the library ([email protected]).
TypeScript
If you are using TypeScript, you will need to install additionally the definitions of the vue-barcode-reader types. There are type definitions available at DefinitelyTyped for those who work with TypeScript.
npm install @types/vue-barcode-reader --save-dev
Or
yarn add -D @types/vue-barcode-reader
Usage
Next, we need to add the library to our project. We can do this by adding it to our Vue component:
import { StreamBarcodeReader } from "vue-barcode-reader";
Now, we need to add a QR or barcode scanner component to our project. We can do this by adding the following code:
<StreamBarcodeReader
@decode="onDecode"
@loaded="onLoaded"
></StreamBarcodeReader>
We should also implement the handlers for decode and loaded events which the library exposes.
onDecode(text) {
console.log(`Decode text from QR code is ${text}`)
},
onLoaded() {
console.log(`Ready to start scanning barcodes`)
}
Now, you can scan QR codes and barcodes in your Vue.js application! Here is an example of a QR code that I scanned:
Demo
You can find the source code of the example application on Github or check it live at Vercel or Netlify. You can also check how vue-barcode-reader library works on the live production website here.
Conclusion
In this blog post, I showed you how to add a QR and barcode scanner capabilities to your Vue.js app. This is a great way to increase engagement with your users, and can be used for a variety of purposes, such as marketing, product identification, and more! I hope you found this blog post helpful. Feel free to ask me any questions in DM on Twitter. Thanks for reading!
DEV Community
How to Add a QR and Barcode Scanner to Your Vue.js App
In this blog post, I will show you how to add a QR and barcode scanner to your Vue.js website. This...
Nuxt.js Projelerinde Global Hata Yönetimi
https://medium.com/@muhammederdinc/nuxt-js-projelerinde-global-hata-y%C3%B6netimi-6bc9abe0334?source=rss------vuejs-5
Günümüzde frontend projeleri eskiye kıyasla daha karmaşık ve dinamik bir hale gelmiş durumdadırlar. Bu nedenle bir frontend projesi…Continue reading on Medium »
https://medium.com/@muhammederdinc/nuxt-js-projelerinde-global-hata-y%C3%B6netimi-6bc9abe0334?source=rss------vuejs-5
Günümüzde frontend projeleri eskiye kıyasla daha karmaşık ve dinamik bir hale gelmiş durumdadırlar. Bu nedenle bir frontend projesi…Continue reading on Medium »
I made an extremely fast, fully static rss reader
https://dev.to/fayaz/i-made-an-extremely-fast-fully-static-rss-reader-11fa
So, I always wanted a rss reader, which had images for all the articles and I wanted it fast, hence came this idea, I have been using this for my personal use for a very long time now, finally making it open source.
https://feedful.vercel.app - do star on github if you find it good.
How did I make it static?
A github action scrapes data and commits the data every 4 hours
Vercel deploys it whenever a new commit is pushed.
https://dev.to/fayaz/i-made-an-extremely-fast-fully-static-rss-reader-11fa
So, I always wanted a rss reader, which had images for all the articles and I wanted it fast, hence came this idea, I have been using this for my personal use for a very long time now, finally making it open source.
https://feedful.vercel.app - do star on github if you find it good.
How did I make it static?
A github action scrapes data and commits the data every 4 hours
Vercel deploys it whenever a new commit is pushed.
DEV Community
I made an extremely fast, fully static rss reader
So, I always wanted a rss reader, which had images for all the articles and I wanted it fast, hence...
Smokey Screen Wipe Transitions In Vue
https://medium.com/geekculture/smokey-screen-wipe-transitions-in-vue-4472b109e01?source=rss------vuejs-5
My first foray into the magical and confusing world of shadersContinue reading on Geek Culture »
https://medium.com/geekculture/smokey-screen-wipe-transitions-in-vue-4472b109e01?source=rss------vuejs-5
My first foray into the magical and confusing world of shadersContinue reading on Geek Culture »
Customizing login and signup pages in Keycloak
https://opcitotechnologies.medium.com/customizing-login-and-signup-pages-in-keycloak-ad97b5a26be9?source=rss------vuejs-5
Application security is of utmost importance in today’s ever-evolving digital ecosystem. Preventing unauthorized access to sensitive data…Continue reading on Medium »
https://opcitotechnologies.medium.com/customizing-login-and-signup-pages-in-keycloak-ad97b5a26be9?source=rss------vuejs-5
Application security is of utmost importance in today’s ever-evolving digital ecosystem. Preventing unauthorized access to sensitive data…Continue reading on Medium »
Vue Storefront is currently the most developer-friendly front-end option for #eCommerce projects.
https://medium.com/@eCommerceSolutions1/vue-storefront-is-currently-the-most-developer-friendly-front-end-option-for-ecommerce-projects-71b777fa52c1?source=rss------vuejs-5
Continue reading on Medium »
https://medium.com/@eCommerceSolutions1/vue-storefront-is-currently-the-most-developer-friendly-front-end-option-for-ecommerce-projects-71b777fa52c1?source=rss------vuejs-5
Continue reading on Medium »
Medium
Vue Storefront is currently the most developer-friendly front-end option for #eCommerce projects.
It is a flexible front-end for any type of eCommerce back-end. With a thriving community, the Next edition includes out-of-the-box support for platforms like commerce tools, #Magento, and #Shopify…
How to add Amazon affiliate and Google AdSense ads to your Vue app.
https://dev.to/cwraytech/how-to-add-amazon-affiliate-and-google-adsense-ads-to-your-vue-app-3a
Sooner or later, if you are developing a content site, niche blog, or some other website that attracts organic visitors, you may decide you want to start making money with your website in the form of ads. When you go to do that, you may end up using some sort of script tag that the ad service provides you with that you need to add to your html somewhere.
If you go ahead and paste the script tag as it is somewhere in your Vue app template, right away your console will start to give you errors:
“Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as script, as they will not be parsed.”
So, how should you go about fixing this issue?
For me, the best way I found was by creating a Vue component just for my ad. That way, I could simply add the component to the pages I wanted the ads to appear, and have a single source of truth for each ad I was going to serve.
I also needed a way to load the script asynchronously from the Vue script tag so that the browser wouldn't have issues with ads calling document.write synchronously. For that, I found a link to postscribe, an npm package just for doing that.
First, install postscribe:
npm install --save postscribe
Then, use postscribe to asynchronously load your script in your Vue component and attach it to the dom:
<template>
<div>
<div id="homeadinfo"></div>
<div id="homeadimage"></div>
</div>
</template>
<script>
/* eslint-disable no-useless-escape */
import postscribe from "postscribe";
export default {
name: "home-garden-banner-ad", //Edit as needed
mounted: function() {
postscribe(
"#homeadinfo",
`<script type="text/javascript">
amzn_assoc_ad_type = "banner";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "US";
amzn_assoc_placement = "assoc_banner_placement_default";
amzn_assoc_campaigns = "your campaign";
amzn_assoc_banner_type = "category";
amzn_assoc_isresponsive = "true";
amzn_assoc_banner_id = "your banner id";
amzn_assoc_tracking_id = "your tracking id";
amzn_assoc_linkid = "your id";
<\/script>`
);
postscribe(
"#homeadimage",
`<script type="text/javascript"
src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1">
<\/script>`
);
}
};
</script>
This attaches the scripts and loads them asynchronously using the postscribe package.
Edit the id and script tags as needed.
Then, import and use your component in your pages/ components.
<template>
<home-garden-banner-ad></home-garden-banner-ad>
...
</template>
<script>
import HomeGardenBannerAd from "@/Components/Ads/HomeGardenBannerAd.vue";
export default {
components: {
HomeGardenBannerAd
},
}
</script>
The great way about this method is you can use those ads over and over, and you can have one central place to edit your ads as needed!
https://dev.to/cwraytech/how-to-add-amazon-affiliate-and-google-adsense-ads-to-your-vue-app-3a
Sooner or later, if you are developing a content site, niche blog, or some other website that attracts organic visitors, you may decide you want to start making money with your website in the form of ads. When you go to do that, you may end up using some sort of script tag that the ad service provides you with that you need to add to your html somewhere.
If you go ahead and paste the script tag as it is somewhere in your Vue app template, right away your console will start to give you errors:
“Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as script, as they will not be parsed.”
So, how should you go about fixing this issue?
For me, the best way I found was by creating a Vue component just for my ad. That way, I could simply add the component to the pages I wanted the ads to appear, and have a single source of truth for each ad I was going to serve.
I also needed a way to load the script asynchronously from the Vue script tag so that the browser wouldn't have issues with ads calling document.write synchronously. For that, I found a link to postscribe, an npm package just for doing that.
First, install postscribe:
npm install --save postscribe
Then, use postscribe to asynchronously load your script in your Vue component and attach it to the dom:
<template>
<div>
<div id="homeadinfo"></div>
<div id="homeadimage"></div>
</div>
</template>
<script>
/* eslint-disable no-useless-escape */
import postscribe from "postscribe";
export default {
name: "home-garden-banner-ad", //Edit as needed
mounted: function() {
postscribe(
"#homeadinfo",
`<script type="text/javascript">
amzn_assoc_ad_type = "banner";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "US";
amzn_assoc_placement = "assoc_banner_placement_default";
amzn_assoc_campaigns = "your campaign";
amzn_assoc_banner_type = "category";
amzn_assoc_isresponsive = "true";
amzn_assoc_banner_id = "your banner id";
amzn_assoc_tracking_id = "your tracking id";
amzn_assoc_linkid = "your id";
<\/script>`
);
postscribe(
"#homeadimage",
`<script type="text/javascript"
src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1">
<\/script>`
);
}
};
</script>
This attaches the scripts and loads them asynchronously using the postscribe package.
Edit the id and script tags as needed.
Then, import and use your component in your pages/ components.
<template>
<home-garden-banner-ad></home-garden-banner-ad>
...
</template>
<script>
import HomeGardenBannerAd from "@/Components/Ads/HomeGardenBannerAd.vue";
export default {
components: {
HomeGardenBannerAd
},
}
</script>
The great way about this method is you can use those ads over and over, and you can have one central place to edit your ads as needed!
DEV Community
How to add Amazon affiliate and Google AdSense ads to your Vue app.
Sooner or later, if you are developing a content site, niche blog, or some other website that...
Laravel InertiaJS Movie App
https://dev.to/laravellercom/laravel-inertiajs-movie-app-416n
Watch on YouTube https://youtu.be/wCy2Apb5yhc
https://dev.to/laravellercom/laravel-inertiajs-movie-app-416n
Watch on YouTube https://youtu.be/wCy2Apb5yhc
DEV Community
Laravel InertiaJS Movie App
Watch on YouTube https://youtu.be/wCy2Apb5yhc
How To Use Feature Flags in Vue.JS
https://daveyhert.iss.onedium.com/how-to-use-feature-flags-in-vue-js-264916e971e7?source=rss------vuejs-5
Feature flags have made it easier than ever to continuously test and integrate new features in our applications with confidence, even…Continue reading on Medium »
https://daveyhert.iss.onedium.com/how-to-use-feature-flags-in-vue-js-264916e971e7?source=rss------vuejs-5
Feature flags have made it easier than ever to continuously test and integrate new features in our applications with confidence, even…Continue reading on Medium »
OnLine and OffLine Detection Web navigator API using VueJS
https://code-road.medium.com/online-and-offline-detection-web-navigator-api-using-vuejs-5b7262ae016c?source=rss------vuejs-5
Web Browser navigator API that represents the current internet connection state of the user agent using VueJS.Continue reading on Medium »
https://code-road.medium.com/online-and-offline-detection-web-navigator-api-using-vuejs-5b7262ae016c?source=rss------vuejs-5
Web Browser navigator API that represents the current internet connection state of the user agent using VueJS.Continue reading on Medium »
Vue 3 GitHub Actions in a nutshell
https://florian-kromer.medium.com/vue-3-github-actions-in-a-nutshell-d207de6f122e?source=rss------vuejs-5
GitHub Actions for adding CI/CD to Vue 3 projects.Continue reading on Medium »
https://florian-kromer.medium.com/vue-3-github-actions-in-a-nutshell-d207de6f122e?source=rss------vuejs-5
GitHub Actions for adding CI/CD to Vue 3 projects.Continue reading on Medium »
Deploy Nuxt ke Vercel
https://dev.to/anggakswr/deploy-nuxt-ke-vercel-4im1
Mengalami masalah ketika deploy aplikasi Nuxt JS ke Vercel? Ya, saya juga. Berikut ini cara saya deploy Nuxt JS ke Vercel. Cara ini masih jalan pada 1 Februari 2022. Mungkin di masa depan cara deploy aplikasi Nuxt di Vercel akan berubah dan cara ini sudah tidak bisa dipakai lagi.
1. Bikin file bernama vercel.json di root project
Ini isi code dari file vercel.json:
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder"
}
]
}
2. Login di Vercel, lalu klik New Project
Setelah login, maka kamu akan diarahkan ke semacam halaman dashboard. Klik tombol New Project untuk bikin project baru.
3. Import project dari Git repo
Cari project-mu dan klik Import. Menurut saya ini adalah cara paling mudah untuk import project kita.
4. Configure Project
Vercel bisa otomatis mendeteksi teknologi / framework apa yang kita gunakan di FRAMEWORK PRESET. Di bagian Configure Project, klik Build and Output Settings,
5. Build & Development Settings
Ganti OUTPUT DIRECTORY jadi .nuxt/dist dengan cara
klik OVERRIDE di sebelah kanan.
6. Jika kamu lebih suka yarn
Kalau kamu lebih suka pakai yarn, ubah jadi seperti ini. Klik Save, dan selesai. Tunggu saja, nanti aplikasimu dapat diakses melalui URL yang tersedia. Biasanya butuh waktu cepat atau paling lama 24 jam.
7. Sekian
Deploy secara gratis di Vercel bermanfaat buat testing aplikasi kita atau sekedar pengen nunjukkin ke client mengenai tampilan / UI website yang udah jadi.
Terimakasih sudah membaca.
https://dev.to/anggakswr/deploy-nuxt-ke-vercel-4im1
Mengalami masalah ketika deploy aplikasi Nuxt JS ke Vercel? Ya, saya juga. Berikut ini cara saya deploy Nuxt JS ke Vercel. Cara ini masih jalan pada 1 Februari 2022. Mungkin di masa depan cara deploy aplikasi Nuxt di Vercel akan berubah dan cara ini sudah tidak bisa dipakai lagi.
1. Bikin file bernama vercel.json di root project
Ini isi code dari file vercel.json:
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder"
}
]
}
2. Login di Vercel, lalu klik New Project
Setelah login, maka kamu akan diarahkan ke semacam halaman dashboard. Klik tombol New Project untuk bikin project baru.
3. Import project dari Git repo
Cari project-mu dan klik Import. Menurut saya ini adalah cara paling mudah untuk import project kita.
4. Configure Project
Vercel bisa otomatis mendeteksi teknologi / framework apa yang kita gunakan di FRAMEWORK PRESET. Di bagian Configure Project, klik Build and Output Settings,
5. Build & Development Settings
Ganti OUTPUT DIRECTORY jadi .nuxt/dist dengan cara
klik OVERRIDE di sebelah kanan.
6. Jika kamu lebih suka yarn
Kalau kamu lebih suka pakai yarn, ubah jadi seperti ini. Klik Save, dan selesai. Tunggu saja, nanti aplikasimu dapat diakses melalui URL yang tersedia. Biasanya butuh waktu cepat atau paling lama 24 jam.
7. Sekian
Deploy secara gratis di Vercel bermanfaat buat testing aplikasi kita atau sekedar pengen nunjukkin ke client mengenai tampilan / UI website yang udah jadi.
Terimakasih sudah membaca.
DEV Community
Deploy Nuxt ke Vercel
Mengalami masalah ketika deploy aplikasi Nuxt JS ke Vercel? Ya, saya juga. Berikut ini cara saya...
Deploy Nuxt to Vercel
https://dev.to/anggakswr/deploy-nuxt-to-vercel-5cjh
Having trouble deploying Nuxt JS application to Vercel? Yes, me too. Here's how I deploy Nuxt JS to Vercel. This method is still running on February 1, 2022. Maybe in the future the method of deploying Nuxt applications on Vercel will change and this method can no longer be used.
1. Create a file called vercel.json in the project root
This is the contents of the code from the vercel.json file:
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder"
}
]
}
2. Login to Vercel, then click New Project
After logging in, you will be redirected to a kind of dashboard page. Click the New Project button to create a new project.
3. Import project from Git repo
Find your project and click Import. I think this is the easiest way to import our project.
4. Configure Project
Vercel can automatically detect what technology / framework we are using in FRAMEWORK PRESET. In the Configure Project section, click Build and Output Settings.
5. Build & Development Settings
Change OUTPUT DIRECTORY to .nuxt/dist by clicking OVERRIDE on the right.
6. If you prefer yarn
If you prefer to use yarn, change it to something like this. Click Save, and you're done. Just wait, later your application can be accessed via the URL provided. Usually it will be quick or takes at most 24 hours.
7. That's all
Deploying for free on Vercel is useful for testing our application or just want to show our client the appearance / UI website that has been made.
Thanks for reading.
https://dev.to/anggakswr/deploy-nuxt-to-vercel-5cjh
Having trouble deploying Nuxt JS application to Vercel? Yes, me too. Here's how I deploy Nuxt JS to Vercel. This method is still running on February 1, 2022. Maybe in the future the method of deploying Nuxt applications on Vercel will change and this method can no longer be used.
1. Create a file called vercel.json in the project root
This is the contents of the code from the vercel.json file:
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder"
}
]
}
2. Login to Vercel, then click New Project
After logging in, you will be redirected to a kind of dashboard page. Click the New Project button to create a new project.
3. Import project from Git repo
Find your project and click Import. I think this is the easiest way to import our project.
4. Configure Project
Vercel can automatically detect what technology / framework we are using in FRAMEWORK PRESET. In the Configure Project section, click Build and Output Settings.
5. Build & Development Settings
Change OUTPUT DIRECTORY to .nuxt/dist by clicking OVERRIDE on the right.
6. If you prefer yarn
If you prefer to use yarn, change it to something like this. Click Save, and you're done. Just wait, later your application can be accessed via the URL provided. Usually it will be quick or takes at most 24 hours.
7. That's all
Deploying for free on Vercel is useful for testing our application or just want to show our client the appearance / UI website that has been made.
Thanks for reading.
DEV Community
Deploy Nuxt to Vercel
Having trouble deploying Nuxt JS application to Vercel? Yes, me too. Here's how I deploy Nuxt JS to...
Getting Started With Vue Js. - Finding my way back home. (Part 1)
https://medium.com/@akonduako/getting-started-with-vue-js-finding-my-way-back-home-part-1-85db9d499893?source=rss------vuejs-5
As a newbie in the world of tech, it is almost impossible to not get swayed by the river of indecision. There are so many different…Continue reading on Medium »
https://medium.com/@akonduako/getting-started-with-vue-js-finding-my-way-back-home-part-1-85db9d499893?source=rss------vuejs-5
As a newbie in the world of tech, it is almost impossible to not get swayed by the river of indecision. There are so many different…Continue reading on Medium »
1. Barra de Navegación — Logo SVG — Vue.js 3
https://medium.com/@garzonsergio/1-barra-de-navegaci%C3%B3n-logo-svg-vue-js-3-2c2646dcbe4d?source=rss------vuejs-5
Este post y los siguientes son uno ejercicio de aprendizaje personal del Vue.js 3, por lo cual todo lo publicado esta abierto a…Continue reading on Medium »
https://medium.com/@garzonsergio/1-barra-de-navegaci%C3%B3n-logo-svg-vue-js-3-2c2646dcbe4d?source=rss------vuejs-5
Este post y los siguientes son uno ejercicio de aprendizaje personal del Vue.js 3, por lo cual todo lo publicado esta abierto a…Continue reading on Medium »
Vuex, Vue router and other technologies I learned during my course final project
https://medium.com/@claudiojlf/vuex-vue-router-and-other-technologies-i-learned-during-my-course-final-project-c94ca9b56ef7?source=rss------vuejs-5
In january 2022 I got real in development and committed to code a little bit everyday, which I acomplished successfully. I watched the…Continue reading on Medium »
https://medium.com/@claudiojlf/vuex-vue-router-and-other-technologies-i-learned-during-my-course-final-project-c94ca9b56ef7?source=rss------vuejs-5
In january 2022 I got real in development and committed to code a little bit everyday, which I acomplished successfully. I watched the…Continue reading on Medium »
How to Use Snackbars in Vuetify
https://blog.devgenius.io/how-to-use-snackbars-in-vuetify-fc9255939da3?source=rss------vuejs-5
Learn how to use the Vuetify snackbar component to display quick messages and notifications.Continue reading on Dev Genius »
https://blog.devgenius.io/how-to-use-snackbars-in-vuetify-fc9255939da3?source=rss------vuejs-5
Learn how to use the Vuetify snackbar component to display quick messages and notifications.Continue reading on Dev Genius »
Write a code with VueJS and deploy it for free on GitHub Pages for job interview
https://dev.to/curiosity/write-a-code-with-vuejs-and-deploy-it-for-free-on-github-pages-for-job-interview-3386
In one of my job interviews for the frontend developer role I have been asked to write a code and provide it for review together with a link to the deployed (live) version.
I have chosen to store my code on GitHub to make it available for review. Once a code is ready on GitHub, then it is really easy to deploy it on GitHub Pages.
Hence, I have been asked to code a demo website with a list of products and following conditions should have been met:
Loaded page should have several products stored.
It should be available to add, edit and delete a product.
Backend or database shouldn't be used, but products should be stored for each particular user who uses demo website.
Product code, name and price should be available to add manually by the user.
When a price of the product is added by the user, then subtotal price should be displayed immediately with a VAT of 21% added.
Demo website should have only 2 pages. Main (index) page to display, add, delete and edit products and billing page to display a list of products and subtotal price of all the products.
To achieve storage of products for each particular user I have decided to use browser's local storage.
So, let's get started on the action!
Step 1.
Login to your GitHub account and create a new GitHub repository:
Step 2.
Give a meaningful name to your new GitHub repo and configure other settings:
Step 3.
After the hit of the button Create repository you will be redirected to the new window. Copy your project's HTTPS url address:
Step 4.
Open a terminal on your computer. Navigate to the desired folder where you want your project's code to be stored. Execute following command to clone a project from GitHub repository to your computer:
git clone paste_url_address_of_your_github_project
In my case it looks like that:
git clone https://github.com/mindaugas-pro/list-with-products.git
Step 5.
Do not navigate to any other folder. Stay on the same folder, because we are going to overwrite existing project by creating a Vue 3 project with vue-cli.
If you don't have installed vue-cli, then execute following code in your terminal as per instructions there:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
Step 6.
Create new Vue 3 project by executing following command in your terminal:
vue create list-with-products
Step 7.
If you have followed instructions and do not changed path/folder as described in step 5 above, then you will be prompted to choose from the following options:
Choose Overwrite by hitting enter to overwrite existing project which is empty anyway.
Explanation in terminal is self explanatory. Your remote GitHub repository has name list-with-products and you have instructed vue-cli to create a new Vue project with the same name on the same folder.
Step 7.
Navigate with arrow keys and select Default (Vue 3) by hitting enter:
https://dev.to/curiosity/write-a-code-with-vuejs-and-deploy-it-for-free-on-github-pages-for-job-interview-3386
In one of my job interviews for the frontend developer role I have been asked to write a code and provide it for review together with a link to the deployed (live) version.
I have chosen to store my code on GitHub to make it available for review. Once a code is ready on GitHub, then it is really easy to deploy it on GitHub Pages.
Hence, I have been asked to code a demo website with a list of products and following conditions should have been met:
Loaded page should have several products stored.
It should be available to add, edit and delete a product.
Backend or database shouldn't be used, but products should be stored for each particular user who uses demo website.
Product code, name and price should be available to add manually by the user.
When a price of the product is added by the user, then subtotal price should be displayed immediately with a VAT of 21% added.
Demo website should have only 2 pages. Main (index) page to display, add, delete and edit products and billing page to display a list of products and subtotal price of all the products.
To achieve storage of products for each particular user I have decided to use browser's local storage.
So, let's get started on the action!
Step 1.
Login to your GitHub account and create a new GitHub repository:
Step 2.
Give a meaningful name to your new GitHub repo and configure other settings:
Step 3.
After the hit of the button Create repository you will be redirected to the new window. Copy your project's HTTPS url address:
Step 4.
Open a terminal on your computer. Navigate to the desired folder where you want your project's code to be stored. Execute following command to clone a project from GitHub repository to your computer:
git clone paste_url_address_of_your_github_project
In my case it looks like that:
git clone https://github.com/mindaugas-pro/list-with-products.git
Step 5.
Do not navigate to any other folder. Stay on the same folder, because we are going to overwrite existing project by creating a Vue 3 project with vue-cli.
If you don't have installed vue-cli, then execute following code in your terminal as per instructions there:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
Step 6.
Create new Vue 3 project by executing following command in your terminal:
vue create list-with-products
Step 7.
If you have followed instructions and do not changed path/folder as described in step 5 above, then you will be prompted to choose from the following options:
Choose Overwrite by hitting enter to overwrite existing project which is empty anyway.
Explanation in terminal is self explanatory. Your remote GitHub repository has name list-with-products and you have instructed vue-cli to create a new Vue project with the same name on the same folder.
Step 7.
Navigate with arrow keys and select Default (Vue 3) by hitting enter:
NativeScript ve Vue ile Mobil Uygulama Geliştirmek
https://medium.com/@serkan.yalcin5734/nativescript-ve-vue-ile-mobil-uygulama-geli%C5%9Ftirmek-ac9bedd3870e?source=rss------vuejs-5
Vue.js’nin sadeliğine alışmış bir web geliştiricisiyseniz, iOS ve Android için yerel mobil uygulamalar geliştirmek için tamamen yeni bir…Continue reading on Medium »
https://medium.com/@serkan.yalcin5734/nativescript-ve-vue-ile-mobil-uygulama-geli%C5%9Ftirmek-ac9bedd3870e?source=rss------vuejs-5
Vue.js’nin sadeliğine alışmış bir web geliştiricisiyseniz, iOS ve Android için yerel mobil uygulamalar geliştirmek için tamamen yeni bir…Continue reading on Medium »