What is a Single-Page Application [ SPA ]?

https://dev.to/ansub/what-is-a-single-page-application-spa--2l6d
What is SPA?

SPA as the name suggests means when you load the app for once. In simple words, the pages don't reload when you click on something. on clicking on an element on the page, SPA only renders that element, instead of what traditional pages do (rendering the whole page with every 🖱)
If you Notice Gmail when you browse through your email you’ll notice that not much changes during navigation - the sidebar and header remain untouched as you go through your inbox.
The three most popular SPA tools are:

** Angular**: developed by Google and now almost ten years old)
React: created by Facebook a few years later
Vue: developed by an ex-Google employee and which has enjoyed a surge in popularity over the past few years.




Examples of SPA


Facebook
Google Maps
Gmail
Twitter
Google Drive




Pros of SPA


Speed and Response Time because you are loading everything at once
a better User Experience as users can access information very quickly.
Caching as SPA only have to request data from the server one time, upon initial download.




Cons of SPA


SEO is the biggest problem with SPAs because of fewer pages and HTML Content.
will not work for users who have disabled Javascript in their browser

if you like this article then follow me on Twitter

I learn and try to simply stuff for you :)
Thanks For Reading!

How to set/update arrays inside objects in Firebase/Vue.js

https://matifanger.medium.com/how-to-set-update-arrays-inside-objects-in-firebase-vue-js-14557d0d42e3?source=rss------vuejs-5
Im here to save your life. You will learn how to set or update an array inside and object inside ANOTHER object in Firebase.Continue reading on Medium »

Build Crud App with Laravel and Vue.js

https://medium.com/techvblogs/build-crud-app-with-laravel-and-vue-js-14f734527d23?source=rss------vuejs-5
Jan 19, 2021, Originally published at techvblogs.com ・10 min readContinue reading on TechvBlogs »

SPA Authentication using Laravel Sanctum and Vue.js

https://medium.com/techvblogs/spa-authentication-using-laravel-sanctum-and-vue-js-6f81b6410a2b?source=rss------vuejs-5
Apr 21, 2021, Originally published at techvblogs.com ・8 min readContinue reading on TechvBlogs »

First Portfolio

https://dev.to/karmablackshaw/first-portfolio-nk0
Finally created my very first portfolio. And feedback is very much welcome :D

Vue 3 Programmatic Component Design

https://javascript.plainenglish.io/vue-3-programmatic-component-design-a1a20f853a4b?source=rss------vuejs-5
Lets create component template which are dynamicContinue reading on JavaScript in Plain English »

[recovery mode] Модульный фронтенд для репликационного масштабирования или как перестать копировать репозитории целиком

https://habr.com/ru/post/647179/?utm_campaign=647179&utm_source=habrahabr&utm_medium=rss
В этой статье будут изложены основные идеи и показаны простые примеры для  грамотной организации, скажем так — «репликационного» масштабирования проектов на фронтенде. То есть, само понятие масштабирования здесь будет рассматриваться скорее с той точки зрения и в одном из смыслов как это понимает бизнес, но, при этом, речь будет пойдет именно о технической стороне процесса, правда, сугубо в контексте браузерной клиентской части информационных систем. Ближе к реальной ситуации: предположим что ваша компания разрабатывает, условно — некий OLAP-продукт, и перед вами как фронтенд-разработчиком ставят задачи по развертыванию и поддержке более или менее сходных новых проектов фронтенда для самых разных клиентов. После скандальной критической статьи о, имхо, сомнительных дурных современных подходах и тенденция в верстке веб-интерфейсов — моя карма на Хабре, наконец-то упала ниже нуля, а я, если честно, не очень хорошо понимаю правила игры, увидят ли эту статью читатели… Но, с другой стороны, готов изложить все просто «в стол», так как считаю что лучшая мотивация для написания чего либо — это если «просто очень хочется написать», сформулировать, прежде всего — для себя самого.Эта статья логично продолжает тематику первой статьи о модулях позволяющих сделать разработку фронтенда качественнее и эффективнее. Но если в первом материале речь шла, прежде всего, об замечательном атомарном тренде в вебдизайне и простом надежном способе доставки его в код компонентных фреймворков с помощью препроцессоров, построении простой кастомной библиотеки UI-компонент для единообразного оформления разных проектов, то новый пример станет немного сложнее — хочется сосредоточиться уже не на «внешних», «оформительских» моментах, а на функциональных и организационных. Для наглядной демонстрации практического применения изложенных в статье идей снова написаны примеры: небольшой модуль-библиотека (и документация к нему), а также использующий его проект, на этот раз с использованием более актуального стека Vue3+TypeScript/Vuex4/VuePress2. В отличии от более примитивной либы из первой статьи этот модуль: 1) использует хранилище, то есть содержит состояние 2) может запускаться в полноценном режиме разработки, как будто это собственно уже сам конечный проект 3) поддерживает темизацию и локализацию. Пример модуля содержит совсем немного компонент и документация на новой версии VuePress, в отличии от первой версии, не кастомизируется под фирменный стиль который предоставляет библиотека. Так сделано не только по причине лени и экономии времени, но, прежде всего, потому что кажется излишним — то что призваны продемонстрировать примеры — этого совсем не требует. Читать далее

Share Your Work!

https://dev.to/cwraytech/share-your-work-1ab2
My wife got me this awesome book by Austin Kleon titled, "Show your Work!". The book is super easy to read and I highly recommend it. The title is pretty clear, but the point of the book is how to share your work and use that as a way to get discovered.
Here is me sharing my work.
The past few months I've been working on a project with Garden Gate Nursery that soon will be finished. It's an inventory program that will help plant nurseries track inventory as it comes and goes from their nursery and generate orders & quotes for customers.
It will be fully integrated with QuickBooks Online & Desktop to generate invoices for orders and track sales. We may integrate with the QuickBooks Payments API as well to be able to charge customers through the app.
It is built on Laravel utilizing Inertia JS as a connector with the backend and Vue on the frontend. I'm using Tailwind CSS for the styling and Daisy UI for some components.



This video is a fast forwarded version of all the updates I took while working on the project. You can see the progress I made on the app and how it evolved over time! All in under 10 minutes.

How to Use Cards in Vuetify

https://javascript.plainenglish.io/how-to-use-cards-in-vuetify-ab50243cd7c7?source=rss------vuejs-5
Learn how to create and customize cards in VuetifyContinue reading on JavaScript in Plain English »

Vue 3 + Vite + TypeScript + Quasar issue

https://dev.to/ingsm/vue-3-vite-typescript-quasar-issue-1hlc
Namaste to everyone!🙏
I'd like to share with you an issue that I had to cope with today:)
It's important to mention, that I used vite cli command to create vue project, then I started adding extensions to it.
When I tried to add typescript to my exsisting project on Vue 3 + Vite + Quasar, I faced the problem:

Following the stipulations here

I received an error from the compiler : File "@quasar/app/tsconfig-preset" was not found.

So, I started to look for a solutions on github and stackoverflow, but found nothing there...
After trying commands likevue add quasar, I looked up in Quasar docs and found App Extensions section. But there I found instructions only for quasar cli:(
But not got discouraged I decided to try a command: yarn add @quasar/app
And voila! It works!:D
Thank you for reading and I hope that this information will be useful:)
P.S. I'm always open to discussion on any theme! Feel free to reach me!:) I'm on Discord: IngSm#0471

Jarida la Yesaya Software — Issue #5

https://medium.com/@yesayaathuman/jarida-la-yesaya-software-issue-5-cb5ed9d34b3?source=rss------vuejs-5
Leo nimekuandalia meetup na conference 3 muhimu kwa ajili yako kwa mwezi huu wa kwanza na wa pili.Continue reading on Medium »

Публикация Vue.js-приложения в GitHub Packages с помощью GitHub Actions для самых маленьких

https://habr.com/ru/post/599119/?utm_campaign=599119&utm_source=habrahabr&utm_medium=rss
В этой серии вы узнаете как собрать докер-образ приложения на Vue.js и как опубликовать его в GitHub Packages. Вот так. Вот в общем-то и... не всё... Одним GitHub Action, как это было для Spring Boot приложения, о котором я рассказывал тут, в этот раз обойтись не получится. Нужно ещё проделать некоторые манипуляции, о которых я и расскажу в данной статье. Читать далее

TIL how to set up path resolving in vite.

https://dev.to/valbuena/til-how-to-set-up-path-resolving-in-vite-lm9
What I Learned

[ is not set up by default. i wonder why.. ]



And why exactly is this interesting?


[ because my imports look way sexier ]




vite.config.js


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})

wovoui-icons: Bootstrap 5 icons in Vue 3

https://dev.to/wovosoft/wovoui-icons-bootstrap-5-icons-in-vue-3-2eop
Bootstrap Icons

wovoui-icons are imported

from Bootstrap 5 icons. There are almost 1522 icons.

And in the future, if Bootstrap provides some more icons, those will be available too as soon as possible.
wovoui-icons are wrapped in a separate package so that it's dependency can

be optional.



Getting Started

Of-course You can use the icons using the provided methods of Bootstrap 5. For example,



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">



@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");



import "bootstrap-icons"





Installation




Using NPM


npm install @wovosoft/wovoui-icons





Using yarn


yarn add @wovosoft/wovoui-icons





How to Use



<template>
<Activity :size="5"/>
<Alarm :size="5"/>
</template>
<script>
import {Activity, Alarm} from "@wovosoft/wovoui-icons";
export default {
components: {Activity, Alarm}
}
</script>

Как визуальный генератор пароля спас меня от выгорания и соцсетевой аддикции (HTML/CSS/JS vue без сборки)

https://habr.com/ru/post/647295/?utm_campaign=647295&utm_source=habrahabr&utm_medium=rss
Перед новым годом по мере нарастания стресса на работе я стал проводить много времени в Твиттере.

Это было моё последнее пристанище после почти годовой деактивации Фейсбука, ВКонтакте и Инстаграма. Автоматический статус ВК после отключения аккаунта хорошо передавал суть моего положения: «Я не могу жить и работать, пока в интернете есть страница с моим именем». Твиттер я никогда не понимал, завел по рекомендации Ситника, и стал вести его осенью на английском языке. Подписывался только на коллег, узнал много интересного, но вскоре и он превратился в обычную соцсеть с болтовней, флиртом и сотнями друзей.Но мне было стыдно удаляться и оттуда. Получится -- убежал отовсюду, оставив после себя пустое место. Соцсеть это всё-таки связь с людьми, и даже с потенциальными клиентами. Читать далее

Angular vs. Vue: The Better Bet for My Web App Project

https://javascript.plainenglish.io/angular-vs-vue-the-better-bet-for-my-web-app-project-d94d3a4418d9?source=rss------vuejs-5
When it comes to creating front-end interfaces, you can choose from numerous frameworks and libraries to work with. Not every framework or…Continue reading on JavaScript in Plain English »

Chai—Build & Export Landing Pages, HTML/React/Vue Components

https://surajair.medium.com/chai-build-export-landing-pages-html-react-vue-components-e2afd6855171?source=rss------vuejs-5
I’ve been working on Chai Builder for past couple of months and happy to annouce that its live for public use in beta.Continue reading on Medium »

How to use Material Design Icons with Nuxt.js efficiently

https://medium.com/@fatihsolhan/how-to-use-material-design-icons-with-nuxt-js-efficiently-75dcd7da2fd0?source=rss------vuejs-5
I have developed many large-scale Nuxt.js applications, one of the difficulties I had while developing these applications was icon…Continue reading on Medium »

Vue.js tutorial for beginner — binding HTML

https://medium.com/@azizabdulaziz70932/vue-js-tutorial-for-beginner-binding-html-2e1d06d56032?source=rss------vuejs-5
In vue application we can binding tag html with simple directive below.Continue reading on Medium »

We choose React & TypeScript not because they’re easy, but because they’re hard.

https://medium.com/next-generation-web/we-choose-react-typescript-not-because-theyre-easy-but-because-they-re-hard-d198a04b2bc6?source=rss------vuejs-5
Breaking the React + TypeScript “perceived” complexity for Web developers who are sceptical or hesitant about using these technologies.Continue reading on Next-Generation Web »

How to Use Dialogs in Vuetify

https://javascript.plainenglish.io/how-to-use-dialogs-in-vuetify-856256b680a4?source=rss------vuejs-5
Learn how to create and customize dialogs with Vuetify.Continue reading on JavaScript in Plain English »