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 »

Thank you, Faker. Now it’s Time to Move On.

https://medium.com/@shahar.kazaz/thank-you-faker-now-its-time-to-move-on-27253d3b0885?source=rss------vuejs-5
TL;DR — Falso is a modern, tree-shakeable, well-documented replacement for Faker.jsContinue reading on Medium »

Thank you, Faker. Now it’s Time to Move On.

https://dev.to/shaharkazaz/thank-you-faker-now-its-time-to-move-on-5cfi
TL;DR — Falso is a modern, tree-shakeable, well-documented replacement for Faker.js
You probably know what happened to Faker.js around two weeks ago.
In collaboration with Netanel Basal, I created a new mock data generator lib to provide a quick, suitable replacement for those relying on Faker (including us).



Meet Falso 🎩

✅ 160+ Functions ( at the time of writing)

✅ Tree Shakable

✅ Fully Typed

✅ Entity Functions

✅ Well documented with live previews

✅ Single and Array Results
There was a lot of community effort put into building this library. In just two weeks, we accomplished:
✨ A whopping 1.6k Github Stars

💪 59 Merged pull requests

🎁 58 New Features
I want to thank everyone who took part in this, you rock!
Give Falso a try and let me know what you think 🌟





ngneat
/
falso



All the Fake Data for All Your Real Needs 🙂









All the Fake Data for All Your Real Needs 🙂

Create massive amounts of fake data in the browser and NodeJS. Tree Shakeable & Fully Typed.






✅  164 Functions

✅  Tree Shakable

✅  Fully Typed

✅  Entity Functions

✅  Single and Array Result
🤓 Learn about it on the docs site

🔥 Run it on Stackblitz

Installation
npm i @ngneat/falso
yarn add @ngneat/falso


Usage

import { randEmail, randFullName } from '@ngneat/falso';
const user = { email: randEmail(), name: randFullName() };
const emails = randEmail({ length: 10 });


Setting a Randomness Seed
You can set your own seed if you want consistent results:

import { rand, seed } from '@ngneat/falso';
seed('some-constant-seed');
// Always returns 2
rand([1, 2, 3, 4, 5]);…



View on GitHub

See the docs:

We’re just getting started.



What’s Next?

🌐 Locale support

💪 More Generators

🎯 Improve data accuracy
You are welcome to contribute! Let us build the next generation of mock data together!
For those looking to contribute for the first time to an open-source, Falso is an excellent choice!