Vue.js Digest 🇷🇺 🇺🇸
39 subscribers
389 photos
745 links
Дайджест новостей из мира vuejs
Download Telegram
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 »
Introducing Vue Autocomplete Element

https://medium.com/@shashikantwagh721/introducing-vue-autocomplete-element-34f0dd5bed7?source=rss------vuejs-5
I had recently published vue-autocomplete-ele an npm package which is a Vue Autocomplete/ Typeahead component which you can import to your…Continue reading on Medium »
Underdog UI Frameworks: 5 JavaScript Frameworks you Need to Try in 2022

https://blog.bitsrc.io/underdog-ui-frameworks-5-javascript-frameworks-you-need-to-try-in-2022-93e11fef186d?source=rss------vuejs-5
Other frameworks deserve some love too!Continue reading on Bits and Pieces »
VUE cli with electron

https://dev.to/grahammorby/vue-cli-with-electron-3ke9
I remember the days when JavaScript simply ran hover effects on buttons and made my page a little more interactive. Ahh the good old days before the many frameworks and crazy things we are now doing with good old JS!
But a project came up recently that required a desktop application which I have never made. How do we do it I thought, I mean I’m a web developer, not an app developer! So after picking my flavor of JavaScript frameworks a few years ago I wondered if there was a way I could use VUE.js as my sword of choice and build this app and thanks to Electron that is all very possible.
Shall we have a go? Now before we jump in I’m going to assume you have used VUE before and are familiar with NPM/Yarn and the terminal. So with that all done let’s get started.
First and foremost we need to get VUE Cli installed which we can do by running the following.



npm install -g @vue/cli


Then we need to create our app. When you move forward it will ask you which flavor of VUE you want to use and for this tutorial, we are going to use VUE 2. So go ahead and run the following in your terminal to create an app. Options like Eslint, babel, and separate js files are your personal choice so I’ll leave the full flavor up to you.



vue create electron-app



Next we need to install Electron, to do this simply install the VUE electron package as so.



cd electron-app
vue add electron-builder


With that done we now need build our little app out by running the following code. You will get asked for a version and for this set up we are using version 13.0.0

Lets now run to serve our app so we can see it in all its wonderful glory!



npm run electron:serve



We now have our desktop app all up and running and ready to code something cool. Now imagine we have a fully fledged JavaScript app with all its wonderful abilities running in a desktop environment. Pretty cool right?
Now if you want to build out the app to install, run the following code



npm run electron:build


Now if we head over to our file explorer you will see we have a dist folder and contained here is our build with an installer, a bundled and non bundled version all ready to test out!

There is so much more we can do with config files and such but for now have a play and see what you think, maybe try building out a few different apps, use vuex and connect to an api! It’s a satisfying way to develop.
generate android app from website url with api

https://dev.to/amreldessouki/generate-android-app-from-website-url-with-api-6ha
*try endpoint *

rapidapi
build your engine now to convert any website to android app ready to publish on google play
the endpoint return key & app bundle & apk