Vue.js Digest 🇷🇺 🇺🇸
@vuejs_digest
39 subscribers
389 photos
745 links
Дайджест новостей из мира vuejs
Download Telegram
About
Blog
Apps
Platform
Join
Vue.js Digest 🇷🇺 🇺🇸
39 subscribers
Vue.js Digest 🇷🇺 🇺🇸
Nuxt 學習筆記(ep.02)

https://medium.com/@case13486/nuxt-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-ep-02-a7bf21c09b4f?source=rss------vuejs-5
專案建好了…看一下我建了甚麼Continue reading on Medium »
16 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Why Use Vue.js to Develop Robust Web & Mobile Apps | Top 6 Reasons to Check

https://innvonixtechsolutions.medium.com/why-use-vue-js-to-develop-robust-web-mobile-apps-top-6-reasons-to-check-392c9ca3521b?source=rss------vuejs-5
Vue.js is aJavaScript framework that can be used to develop interactive user interfaces without requiring a significant amount of…Continue reading on Medium »
15 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Authenticating users to your web app using metamask and nodejs

https://duartefdias.medium.com/authenticating-users-to-your-web-app-using-metamask-and-nodejs-e920e45e358?source=rss------vuejs-5
A step-by-step guide with code snippets for implementing a web3 jwt based login flow.Continue reading on Medium »
15 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
OverVue 5.0: Get Started With Vue 3 — FAST

https://medium.com/@lamerson28/overvue-5-0-get-started-with-vue-3-fast-873d8c3dcfa5?source=rss------vuejs-5
A prototyping tool to quickly bring your Vue 3 ideas to lifeContinue reading on Medium »
16 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
VueJs whitout Node and npm

https://medium.com/@certosinolab/vuejs-whitout-node-and-npm-b7410981ccdc?source=rss------vuejs-5
Build a VueJs application whitout a Build Step and add an external multiselect component from unpkg.comContinue reading on Medium »
16 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Vue 2 ve Vue 3 Arasındaki Farklar Neler?

https://medium.com/berkut-teknoloji/vue-2-ve-vue-3-aras%C4%B1ndaki-farklar-neler-2de15b89c409?source=rss------vuejs-5
Vue 3, gelişen bir JavaScript frameworkü ve Vue'nun en son sürümüdür. Geliştiricilerin ulaşılabilir, çok yönlü, performanslı, bakımı kolay…Continue reading on Berkut Teknoloji »
15 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Hello world in Vue.js

https://dev.to/mohsenkamrani/hello-world-in-vuejs-3l1
So you've heard the name Vue.js, at least I assume so otherwise you wouldn't be here. Also you might have heard how powerful, yet simple it is. In this post, which is the first on in a series of posts about Vue.js, I'll show you the basic steps to get started with Vue.js, and print the message we all look forward to seeing, the glorious "Hello, world!".
Let's start by creating a file named index.html and import Vue in the head tag like this:



<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
...


Now that we can use Vue, let's use Vue's template syntax to render our message:



<body>
<div id="app">{{ message }}</div>
</body>


Notice that here we have a special syntax which is different from our usual html: {{ message }}. Here we are just rendering the value of variable named message exactly where the template is placed.
All we need to now is to create an instance of Vue and attach it to our HTML tag. To reference the tag I've given it an arbitrary id app. Let's do this by creating a file named index.js:



var app = new Vue({
el: '#app',
data: {
message: 'Hello, world!'
}
})


In this code we have created a new instance of Vue, have specified an element to attach to, and the data that is available to be used in our templates.
It's worth mentioning that #app refers to an html element with the id of app.

As the last step we just import index.js lin our html page. Just make sure you import it right before your closing body tag.



<script src="./index.js"></script>
</body>


This is all we need to render our message with Vue and this is how our complete index.html looks like:



<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script src="./index.js"></script>
</body>
</html>


Now that we have our code ready, let's deploy it on utopiops.
Head over to the Fully managed applications section as we want to use free static website deployment and hosting that Utopiops offers.

Now we choose Static website as the application type to be created. (Utopiops also offers free plans for Function and Dockerized applications)

Now the only thing we need to know is to specify the repository that we store our code (Utopiops supports Github, Bitbucket and Gitlab).
Remember we don't need to provide any build command!

And that's it, in a few seconds we have our website ready and every time we make a change to our code it automatically deploys our changes.
https://vuejs-hello-world-e9d16563.sites.utopiops.com
Note: Utopiops is in public beta at the time of writing this post and the view you see when you log in to Utopiops at https://www.utopiops.com might be different, but the good news is that it sure just have become more user-friendly and easier to use.
You can find the source code here.
DEV Community
Hello world in Vue.js
So you've heard the name Vue.js, at least I assume so otherwise you wouldn't be here. Also you might...
16 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Angular Vs Vue: Which Framework to Choose in 2022?

https://javascript.plainenglish.io/angular-vs-vue-which-framework-to-choose-in-2022-579efcb50e82?source=rss------vuejs-5
In the world of front-end development, JavaScript frameworks are always in style. As well as being easier to create cross-platform apps…Continue reading on JavaScript in Plain English »
16 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Blockchain : Day 2 — EtherJS + VueJS

https://thanhpolimi.medium.com/blockchain-day-2-etherjs-vuejs-4a2896a50ef2?source=rss------vuejs-5
# OverviewContinue reading on Medium »
19 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Vue I18n translations in multiple files

https://medium.com/@robert.spendl/vue-i18n-translations-in-multiple-files-96a116017d89?source=rss------vuejs-5
Vue I18n is the most popular internationalisation plugin for Vue.js, but while it has an officially provided plugin, there’s no properly…Continue reading on Medium »
Medium
Vue I18n translations in multiple files
Vue I18n is the most popular internationalisation plugin for Vue.js, but while it has an officially provided plugin, there’s no properly…
19 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
how do i type slots in vue3?

https://dev.to/valbuena/how-do-i-type-slots-in-vue3-449f
how do i fix this? in dev all is fun and giggles until i build for production..

please help! i couldnt find any answer.

i feel dumb xD

thanks!
16 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Laravel 8, VueJS 3 & Tailwind CSS 3 SPA CRUD with VueRouter & VueX Store

https://scriptmint.iss.onedium.com/laravel-8-vuejs-3-tailwind-css-3-spa-crud-with-vuerouter-vuex-store-7e32419dcba4?source=rss------vuejs-5
Are you looking for a SPA CRUD built with latest version of Laravel, VueJS & Tailwind? I have spent lot of my time searching for a sample…Continue reading on Medium »
17 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Create a Beautiful To-Do List App with Vuetify: Setting Task Due Dates and Importance

https://javascript.plainenglish.io/create-a-beautiful-to-do-list-app-with-vuetify-setting-task-due-dates-and-importance-e21e226b496c?source=rss------vuejs-5
Use Vuetify menus, date pickers and checkboxes to enable setting task completion dates and importance.Continue reading on JavaScript in Plain English »
18 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Vite 2.x + Vue 3.x + quasar 2.x + windcss 3.x starter ⚡

https://dev.to/fyeeme/vite-2x-vue-3x-quasar-2x-windcss-3x-starter-572j
Yeah, quasar's official vite cli is released. and I'v created a demo, to expose how to use @/quasar/vite-plugin
Pina as a replacement for vuex has been add. and also I'v switched to ts.
I'v add a online demo for this repo https://fyeeme-vite-quasar.netlify.app/
DEV Community
Vite 2.x + Vue 3.x + quasar 2.x + windcss 3.x starter ⚡
Yeah, quasar's official vite cli is released. and I'v created a demo, to expose how to use...
36 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Nuxt 3 first steps.

https://itnext.io/nuxt-3-first-steps-c23d142405c4?source=rss------vuejs-5
So I’m a huge Nuxt fan, and it’s quite obvious that I was very excited when the new framework version [3] was finally released. Just after…Continue reading on ITNEXT »
16 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Conditionals and loops in Vue.js

https://dev.to/mohsenkamrani/conditionals-and-loops-in-vuejs-imn
In my previous post I covered the basics of using Vue in our web application. In this tutorial I will cover two of the most important feature or fundamental structures of Vue, conditionals and loops. It's worth mentioning as we go towards more advanced topics in the upcoming blogs we'll use what we learned in the previous tutorials to solve more complex problems. For now, let's keep it short and simple.
Let's again start by creating a file named index.html and import Vue in the head tag like this:



<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
...


Now we want to conditionally render a tag based on a random value. Let's say we have a tag like this:



<div>I'm displayed randomly</div>


To do so let's create a file named index.js and create an instance of Vue.



var app = new Vue({
el: '#app'
})


We want to attach this instance to an element with id app so let's wrap our dynamically rendered code inside a div and give it the id app



<div id="app">
<div>I'm displayed randomly</div>
</div>


Now we add a boolean property to our instance and set its value randomly to true or false:



var app = new Vue({
el: '#app',
data: {
random: Math.random() > 0.5,
}
})


And we use a directive named v-if to render the div only if random is true:



<div id="app">
<div v-if="random">I'm displayed randomly</div>
</div>



The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.

Matho.random() generates a number between 0 and 1, so we expect almost half of the times we refresh the page, we see the message.
Next, let's render a list of colours with v-for directive. We add an array containing such names to our vue instance first.



var app = new Vue({
el: '#app',
data: {
random: Math.random() > 0.5,
colours: ["red", "blue", "black", "green"]
}
})


Now we can simply use v-for to render the list:



<ol>
<li v-for="colour in colours">
{{colour}}
</li>
</ol>



We can use the v-for directive to render a list of items based on an array. The v-fordirective requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on.

Finally this is how our index.html file looks like:



<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="random">I'm displayed randomly</div>
<ol>
<li v-for="colour in colours">{{colour}}</li>
</ol>
</div>
<script src="./index.js"></script>
</body>
</html>


Now that we have our code ready, let's deploy it on utopiops.
Head over to the Fully managed applications section as we want to use free static website deployment and hosting that Utopiops offers.

Now we choose Static website as the application type to be created. (Utopiops also offers free plans for Function and Dockerized applications)

Now the only thing we need to know is to specify the repository that we store our code (Utopiops supports Github, Bitbucket and Gitlab).
Remember we don't need to provide any build command!

And that's it, in a few seconds we have our website ready and every time we make a change to our code it automatically deploys our changes.
https://vuejs-conditional-loops-bd885053.sites.utopiops.com
Note: Utopiops is in public beta at the time of writing this post and the view you see when you log in to Utopiops at https://www.utopiops.com might be different, but the good news is that it sure just have become more user-friendly and easier to use.
You can find the source code here.
DEV Community
Conditionals and loops in Vue.js
In my previous post I covered the basics of using Vue in our web application. In this tutorial I will...
14 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Nuxt NFT dApp with MetaMask and Ethers.js - Wallet Plugin

https://medium.com/@zerocodenft/nuxt-nft-dapp-with-metamask-and-ethers-js-wallet-plugin-a6dbeddcd9fb?source=rss------vuejs-5
This is part #1 of the “Nuxt NFT minting dApp” series that shows how to create a wallet plugin to be used throughout the app.Continue reading on Medium »
17 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Digital Clock using Vue 3 Composition API

https://dev.to/snehalk/digital-clock-using-vue-3-composition-api-5cmc
Hello Readers,
In this blog post we will see how can we create a digital clock using Vue 3 composition API. Composition API is a new feature added in Vue through which we can reuse the code in multiple vue component.
For more details about how to use composition API you can refer my previous blog. I providing a link - go through it for basic information about it.








What is Composition API in Vue 3
Snehal ・ Dec 23 '21 ・ 3 min read

#javascript
#codenewbie
#vue
#webdev




So let's start with main topic.
First we need to create a component named as DigitalClock.vue



<template>
<div class="flex h-screen">
<div class="w-full lg:w-1/4 m-auto p-7 shadow-lg shadow-pink-400 border-4 border-t-purple-600 border-r-pink-600 border-b-pink-600 border-l-indigo-600 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
<!-- <p class="font-bold text-white text-lg">{{ currentTime.toLocaleString() }}</p> -->
<p class="font-bold text-white pt-3 text-6xl">{{ currentTime.toLocaleTimeString() }}</p>
<p class="font-bold text-white text-sm mb-1 flex justify-end mr-3">{{ currentTime.toLocaleDateString() }}</p>
</div>
</div>
</template>
<script>
import { useCurrentTime } from "../composables/useCurrentTime";
export default {
name: "CurrentTimeExample",
setup() {
const { currentTime } = useCurrentTime();
console.log(currentTime.value);
return { currentTime };
},
};
</script>



In the above code we are calling useCurrentTime method from the useCurrentTime.js file where we are going to write our main logic using composition api and from that we will call a currentTime and return its value to the component.
To create a composition api's we will create a folder named as composables where we keep/create all composition api's.
As stated above create a folder named as composables in src folder and create js file as useCurrentTime.js. (src/composables/useCurrentTime.js)



import { ref, onBeforeUnmount } from "vue";
export const useCurrentTime = () => {
const currentTime = ref(new Date());
const updateCurrentTime = () => {
currentTime.value = new Date();
};
const updateTimeInterval = setInterval(updateCurrentTime, 1000);
onBeforeUnmount(() => {
clearInterval(updateTimeInterval);
});
return {
currentTime,
};
};


In above code we have created a const variable as currentTime which holds current Date and Time, and a method updateCurrentTime to update the current time. There is an another method called as updateTimeInterval which will update the time after given set of interval.

You can see a hook called as onBeforeUnmount() which will clear the currentTime when component is unmounted.

And the last thing is we are returning the current time, so wherever we have used/called this useCurrenttTime.js we will have the value.
In this way wherever we require the date n time we can reuse this code by simply importing it to the component.
You can also refer live demo in sandbox.



Happy Reading.. 🦄 🦁
DEV Community
Digital Clock using Vue 3 Composition API
Hello Readers, In this blog post we will see how can we create a digital clock using Vue 3...
11 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Building an app around Vue 3 Composition API

https://medium.com/@valerih333/building-an-app-around-vue-3-composition-api-f3595a7e39f2?source=rss------vuejs-5
Continue reading on Medium »
13 viewsWordPress Digest Bot, 
Vue.js Digest 🇷🇺 🇺🇸
Comparing libraries

https://dev.to/vadim/comparing-libraries-3m58
I just want to highlight two great services. They provide some very interesting statistics which might help you to choose a library among competitions. If you haven't seen yet go check it out:
https://www.npmtrends.com/:


https://openbase.com/:
DEV Community
Comparing libraries
I just want to highlight two great services. They provide some very interesting statistics which...
14 viewsWordPress Digest Bot,