Vue.js Interview Challenge — #11 — Direction Arrow

https://medium.com/js-dojo/vue-js-interview-challenge-11-direction-arrow-c3d12ccbb00c?source=rss------vuejs-5
Problem statementContinue reading on Vue.js Developers »

Getting rid of NgModule in Angular. Javascript

https://dev.to/antmik/getting-rid-of-ngmodule-in-angular-javascript-2gcc
Working many years with angular I found it hard to create the structure of a project. The main reason for that struggle lay behind the way Angular interacts with components and modules. The following article explains what is the issue with NgModule and whether is going to change in the foreseeable future.



Builtin lazy loading mechanisms

Angular has NgModule based architecture. In other words, each application has at least one NgModule which connects all the components and routes together. It is a practical approach for applications structure. An application has a central unit that contains all the declarations. That’s right when we are talking about small web apps.
When working with large Single Page Applications performance becomes a critical pain point. It is a time to start thinking about optimization. One of the ways to reduce loading times is to minify application size on the first load. This goal can be achieved with lazy loading. The technique is supported by angular routing mechanisms.
The technique allows loading specific parts of an application only when needed. Here is the full documentation on how to implement lazy loading within Angular framework.



What is wrong with NgModules?

Up to now, all seems correct, right? Let’s zoom in to see whether potential issues could pop up.
For instance, we will take the Angular Material UI. The framework should comply with best practices because it is built and maintained by the Angular team. Looking at the components provided you may mention that each of them has its own NgModule. It is done to allow importing of a single component without grabbing all them and overloading the application.
What does all that mean for me as a developer? Practically you will need to create a NgModule for each of the components. Thus double action on each component creation.
For newbies, the concept may appear quite painful. To be honest for me to work in this way is still frustrating.



VueJs components interaction

When I started to work with VueJs I didn’t feel any discomfort. Just after some period of time mentioned I am doing fewer actions to achieve the same component interactions than I was doing in Angular. “How could it be?” I thought. Just after side by side comparison, figured out what was missing through all the development process with VueJs. The answer was “modules”.
In VueJs all is based on components. Do you want to create a page? Make a component. Do you want to create a reusable UI piece of code? Make component! Nothing more. Just that easy.
Aren’t modules making a more coherent structure? Correct me if I am wrong, but I didn’t mention any practical benefit of this additional architecture layer yet.



Is it going to change?

Yes, the Angular roadmap gives all Angular developers a ray of hope. The proposal was explained and discussed in this “[Complete] RFC: Standalone components, directives and pipes — making Angular’s NgModules optional”.
Yet, pay attention to this statement:

This proposal is not trying to remove the concept of a NgModule from Angular — it is rather making it optional for typical application development tasks.

At the same time we believe that it paves the path towards greatly reducing the role of NgModule for typical development scenarios — to the point that some time in the future it would be possible and reasonable for us to consider removing it altogether.




To conclude

Getting rid of modules is the first step towards Angular architecture simplification. So far I see only benefits in that act.
Who knows maybe in the future Angular will adopt a functional components approach as React did instead of classes.

Getting rid of NgModule in Angular. Javascript

https://medium.com/@antmihlin/getting-rid-of-ngmodule-in-angular-javascript-43fd510779bc?source=rss------vuejs-5
Working many years with angular I found it hard to create the structure of a project. The main reason for that struggle lay behind the way…Continue reading on Medium »

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 »

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 »

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 »

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 »

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 »

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 »

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.

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 »

Blockchain : Day 2 — EtherJS + VueJS

https://thanhpolimi.medium.com/blockchain-day-2-etherjs-vuejs-4a2896a50ef2?source=rss------vuejs-5
# OverviewContinue reading on Medium »

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 »

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!

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 »

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 »

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/

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 »

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.

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 »