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 »
Dependency Wheel using VueJS 1/10
https://dev.to/101samovar/dependency-wheel-using-vuejs-110-27m5
Let's create a SPA using VueJS.
This application will have a chart, an user input form, and a toolbar for adding and removing elements.
Simple routing with routes and route parameters will be implemented.
The application will interact with the API.
🔗Video-tutorial
🔗Sourse code
https://dev.to/101samovar/dependency-wheel-using-vuejs-110-27m5
Let's create a SPA using VueJS.
This application will have a chart, an user input form, and a toolbar for adding and removing elements.
Simple routing with routes and route parameters will be implemented.
The application will interact with the API.
🔗Video-tutorial
🔗Sourse code
DEV Community
Dependency Wheel using VueJS 1/10
Let's create a SPA using VueJS. This application will have a chart, an user input form, and a toolbar...
Vue 3 — Google reCaptcha implemented in just 2 minutes.
https://medium.com/js-dojo/vue-3-google-recaptcha-implemented-in-just-2-minutes-e68baea35a0?source=rss------vuejs-5
Learn how to easily implement Google reCaptcha in your Vue 3 application. In only takes 2 minutes!Continue reading on Vue.js Developers »
https://medium.com/js-dojo/vue-3-google-recaptcha-implemented-in-just-2-minutes-e68baea35a0?source=rss------vuejs-5
Learn how to easily implement Google reCaptcha in your Vue 3 application. In only takes 2 minutes!Continue reading on Vue.js Developers »
Fundamental OF Lazy Loading In Vue Js
https://medium.com/@subodha.sahu91/fundamental-of-lazy-loading-in-vue-js-a24fa5c777e9?source=rss------vuejs-5
Definition:Continue reading on Medium »
https://medium.com/@subodha.sahu91/fundamental-of-lazy-loading-in-vue-js-a24fa5c777e9?source=rss------vuejs-5
Definition:Continue reading on Medium »
Best way to work with dialogs in Vue !
https://medium.com/codex/best-way-to-work-with-dialogs-in-vue-b992e7ca1818?source=rss------vuejs-5
You won’t want to do it any other way after reading this.Continue reading on CodeX »
https://medium.com/codex/best-way-to-work-with-dialogs-in-vue-b992e7ca1818?source=rss------vuejs-5
You won’t want to do it any other way after reading this.Continue reading on CodeX »
You should read the DOCS in React or Vue
https://medium.com/@clielizek.joy/you-should-read-the-docs-in-react-or-vue-841bc5c2c9f5?source=rss------vuejs-5
I started my journey into software development just by being curious. I relied mostly on tutorials and almost ended up in a never-ending…Continue reading on Medium »
https://medium.com/@clielizek.joy/you-should-read-the-docs-in-react-or-vue-841bc5c2c9f5?source=rss------vuejs-5
I started my journey into software development just by being curious. I relied mostly on tutorials and almost ended up in a never-ending…Continue reading on Medium »
Medium
You should read the DOCS in React or Vue
I started my journey into software development just by being curious. I relied mostly on tutorials and almost ended up in a never-ending…
Vue VS React- Best Framework choice for 2022
https://webmobtechnologies.medium.com/vue-vs-react-best-framework-choice-for-2022-d8d16f9d6d88?source=rss------vuejs-5
The front-end developers prefer JavaScript the foremost, thanks to its intelligent framework, libraries, massive functionality array, and…Continue reading on Medium »
https://webmobtechnologies.medium.com/vue-vs-react-best-framework-choice-for-2022-d8d16f9d6d88?source=rss------vuejs-5
The front-end developers prefer JavaScript the foremost, thanks to its intelligent framework, libraries, massive functionality array, and…Continue reading on Medium »
OverVue 6.0: Vue’s Most Popular Prototyping Tool Just Got Better
https://medium.com/@bebart87/overvue-6-0-vues-most-popular-prototyping-tool-just-got-better-4f4d706d2a65?source=rss------vuejs-5
Expedite the development of your next Vue application — now with TypeScript, Vite and a revamped UIContinue reading on Medium »
https://medium.com/@bebart87/overvue-6-0-vues-most-popular-prototyping-tool-just-got-better-4f4d706d2a65?source=rss------vuejs-5
Expedite the development of your next Vue application — now with TypeScript, Vite and a revamped UIContinue reading on Medium »
How To Implement Google Bar Chart In Vue Js
https://websolutionstuff.medium.com/how-to-implement-google-bar-chart-in-vue-js-406c2b396e45?source=rss------vuejs-5
In this tutorial, we will see how to implement google bar chart in vue js. In vue js perform bar chart tutorial we are using the…Continue reading on Medium »
https://websolutionstuff.medium.com/how-to-implement-google-bar-chart-in-vue-js-406c2b396e45?source=rss------vuejs-5
In this tutorial, we will see how to implement google bar chart in vue js. In vue js perform bar chart tutorial we are using the…Continue reading on Medium »
Medium
How To Implement Google Bar Chart In Vue Js
In this tutorial, we will see how to implement google bar chart in vue js. In vue js perform bar chart tutorial we are using the…
How to Create Switches with Vuetify
https://javascript.plainenglish.io/vuetify-switch-f5ba09a7ad64?source=rss------vuejs-5
The complete guide to creating and customizing switches with the Vuetify switch component. Use them to accept boolean input from users.Continue reading on JavaScript in Plain English »
https://javascript.plainenglish.io/vuetify-switch-f5ba09a7ad64?source=rss------vuejs-5
The complete guide to creating and customizing switches with the Vuetify switch component. Use them to accept boolean input from users.Continue reading on JavaScript in Plain English »
How to deploy Vue sites on Fathym
https://medium.com/@rich.kurtzman/how-to-deploy-vue-sites-on-fathym-190a45b43bd2?source=rss------vuejs-5
Use this simple tutorial to flashup a site built with Vue.Js. It’s easy and will enhance your life.Continue reading on Medium »
https://medium.com/@rich.kurtzman/how-to-deploy-vue-sites-on-fathym-190a45b43bd2?source=rss------vuejs-5
Use this simple tutorial to flashup a site built with Vue.Js. It’s easy and will enhance your life.Continue reading on Medium »
Creiamo una app con Vue ed Electron -Parte 3
https://chiarapassaro.medium.com/creiamo-una-app-con-vue-ed-electron-parte-3-46aa10391e03?source=rss------vuejs-5
Generiamo il form dinamicamente.
Esploriamo: mixins, modificatore .sync e validazione.Continue reading on Medium »
https://chiarapassaro.medium.com/creiamo-una-app-con-vue-ed-electron-parte-3-46aa10391e03?source=rss------vuejs-5
Generiamo il form dinamicamente.
Esploriamo: mixins, modificatore .sync e validazione.Continue reading on Medium »
Vue Clicked Outside: Creating Custom Listener for Clicking Outside a Component
https://riadsaidur.medium.com/vue-clicked-outside-creating-custom-listener-for-clicking-outside-a-component-60293d10347?source=rss------vuejs-5
Listening for a Click event outside a component is a very common task for any web apps. It gives more dynamic look to the web app and is…Continue reading on Medium »
https://riadsaidur.medium.com/vue-clicked-outside-creating-custom-listener-for-clicking-outside-a-component-60293d10347?source=rss------vuejs-5
Listening for a Click event outside a component is a very common task for any web apps. It gives more dynamic look to the web app and is…Continue reading on Medium »
How to use wow.js with Vue.js
https://medium.com/@oybek.odili/how-to-use-wow-js-with-vue-js-a96f5de5c6ff?source=rss------vuejs-5
Install wow.js and use it in mounted lifecycle hook. That’s it!Continue reading on Medium »
https://medium.com/@oybek.odili/how-to-use-wow-js-with-vue-js-a96f5de5c6ff?source=rss------vuejs-5
Install wow.js and use it in mounted lifecycle hook. That’s it!Continue reading on Medium »
Medium
How to use wow.js with Vue.js
Install wow.js and use it in mounted lifecycle hook. That’s it!
Vue.js + Vite — How to dynamically inline SVG’s without 3rd party libraries
https://medium.com/@vneves/vue-js-vite-how-to-dynamically-inline-svgs-without-3rd-party-libraries-7fb504273b06?source=rss------vuejs-5
Recently on a project that I’m working on with Vue 3 + Vite and using a Server Driven UI approach while building a basic link component…Continue reading on Medium »
https://medium.com/@vneves/vue-js-vite-how-to-dynamically-inline-svgs-without-3rd-party-libraries-7fb504273b06?source=rss------vuejs-5
Recently on a project that I’m working on with Vue 3 + Vite and using a Server Driven UI approach while building a basic link component…Continue reading on Medium »
Top 5 Features of Vue.js Devtools to Enhance Your Development Strategies
https://medium.com/syncfusion/top-5-features-of-vue-js-devtools-to-enhance-your-development-strategies-e6ef3a50f11f?source=rss------vuejs-5
Vue.js DevTools offers a lot of features to ease the development process of a Vue app, this article points to the top 5 features for this.Continue reading on Syncfusion »
https://medium.com/syncfusion/top-5-features-of-vue-js-devtools-to-enhance-your-development-strategies-e6ef3a50f11f?source=rss------vuejs-5
Vue.js DevTools offers a lot of features to ease the development process of a Vue app, this article points to the top 5 features for this.Continue reading on Syncfusion »
Porque escolhi VueJs?
https://medium.com/@rsantosdesenv/porque-escolhi-vuejs-c404de365033?source=rss------vuejs-5
Primeiramente a perguntar que deve ser feita é qual é meu real objetivo, pois independente da escolha deve se haver uma atração uma…Continue reading on Medium »
https://medium.com/@rsantosdesenv/porque-escolhi-vuejs-c404de365033?source=rss------vuejs-5
Primeiramente a perguntar que deve ser feita é qual é meu real objetivo, pois independente da escolha deve se haver uma atração uma…Continue reading on Medium »