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!

Building Reusable component with Vue — Part 2 (Accordion Component)

https://samador9.medium.com/building-reusable-component-with-vue-part-2-accordion-component-12b65d858900?source=rss------vuejs-5
Hey!, welcome to part 2 of this tutorial where we’re building reusable components with Vue. In part 1 of this tutorial, we learnt how to…Continue reading on Medium »

Chapter 4 — Init Nuxt 3 App

https://brieuccaillot.iss.onedium.com/chapter-4-init-nuxt-3-app-62c3c5981f5a?source=rss------vuejs-5
In the article, I will be creating the Nuxt project, before adding ThreeJS.Continue reading on Medium »

Preload JSON to load websites faster (Lighthouse, SEO)

https://medium.com/@marius.dras/preload-json-to-load-websites-faster-lighthouse-seo-880a31815913?source=rss------vuejs-5
Avoiding issues when using <link rel=”preload”>Continue reading on Medium »

Add BootstrapVue to VuePress

https://dev.to/conorsheehan1/add-bootstrapvue-to-vuepress-3h7g
Create a VuePress project

The first thing we need to do is create a new VuePress project. It's really easy with the latest version of npm or yarn. From the VuePress docs



yarn create vuepress-site $optionalDirectoryName





Install BootstrapVue

Next we install BootstrapVue



yarn add bootstrap bootstrap-vue





Configuration

Now we need to import BootstrapVue in .vuepress/enhanceApp.js, where we have access to the vue instance.



// .vuepress/enhanceApp.js
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
export default ({ Vue, options, router, siteData }) => {
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);
}


Finally we need to load the bootstrap css. VuePress ships with stylus by default now, but we can still import css into our stylus file at .vuepress/styles/index.styl



/**
* Custom Styles here.
*
* ref：https://v1.vuepress.vuejs.org/config/#index-styl
*/
@require '~bootstrap/dist/css/bootstrap.css'
@require '~bootstrap-vue/dist/bootstrap-vue.css'


That's it! Now you can use BootstrapVue components in your VuePress app.



Example

Vuepress lets you embed components directly in markdown, so you can do something like this



<!-- src/index.md -->
## Hi from bootstrap-vue
<b-button>Hello world!</b-button>


Here's an example app I've deployed to netlify which uses various BootstrapVue components including b-carousel and b-table: https://conorscocktails.netlify.app/
You can find the sourcecode here: https://github.com/ConorSheehan1/conors-cocktails

Top 5 free resources for getting started on Vue JS

https://medium.com/js-dojo/top-5-free-resources-for-getting-started-on-vue-js-8c05bdbb47b5?source=rss------vuejs-5
So you want to get started learning Vue? That is awesome, great choice in frameworks!Continue reading on Vue.js Developers »

Vue.js Interview Challenge — #14 — Summoning Pikachu

https://medium.com/@m.rybczonek/vue-js-interview-challenge-14-summoning-pikachu-bccfe44eba0a?source=rss------vuejs-5
Problem statementContinue reading on Medium »

Implementing Audio in a Podcast App with Strapi

https://dev.to/ravgeetdhillon/implementing-audio-in-a-podcast-app-with-strapi-26fa
Podcasts have exploded in popularity, and platforms including Google Podcasts and Spotify offer content creators a way to communicate their thoughts with listeners around the world. If you’d like to join them, you can create your own podcast app using Strapi and a frontend of your choice.
In this tutorial, you’ll learn to implement audio in a podcast app. You’ll build your app in Nuxt.js and manage your podcast content in the Strapi CMS.
Read the full blog on Strapi.
Thanks for reading 💜
I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.
Connect with me through Twitter • LinkedIn • Github or send me an Email.
— Ravgeet, Full Stack Developer and Technical Content Writer

Vue.js Interview Challenge — #14 — Summoning Pikachu — Solution

https://medium.com/js-dojo/vue-js-interview-challenge-14-summoning-pikachu-solution-9ca3c67e497d?source=rss------vuejs-5
SolutionContinue reading on Vue.js Developers »