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 »
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…
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!
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 »
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 »
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/
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...
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 »
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.
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...
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 »
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 »
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.. 🦄 🦁
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...
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 »
https://medium.com/@valerih333/building-an-app-around-vue-3-composition-api-f3595a7e39f2?source=rss------vuejs-5
Continue reading on Medium »
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/:
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...
5 good reasons to use Nuxt.js
https://dev.to/daoodaba975/5-good-reasons-to-use-nuxtjs-3fp2
Nuxt.js is a free and open source JavaScript framework based on Vue and Node JS.
It allows a simplification, an optimization and also an acceleration of the development of applications. Nuxt simplifies the development of universal or single page Vue apps.
I love it for his flexibility and ultra modular architecture.
If you are not yet convinced by this technology, here are 5 good reasons to use Nuxt.js for your next project :
1. Create universal apps easily 🌍
Building universal applications can be tedious because you have to do a lot of configuration server side and client side.
The framework came with the advantage of developing high performance universal applications with the particularity of being able to execute its code on both the server side and client side.
Nuxt is self-configured and ready to use. With editable default configurations, they allow you to start a project with a base without having to worry about additional settings to be made.
With all of these benefits, creating a universal app with Nuxt just got so easy.
2. Quickness ⚡
The advantage of rendering on the server side and on the client side makes it possible to have a powerful and very responsive application. Nuxt also allows us to have a wide range of modules available created by the community that allow us to have high performance applications in speed.
But like everything, you should not overdo it in the risk of impacting the performance of your applications.
3. File System Routing 🚧
The System File Routing with Nuxt is just magic.
When you create a .vue file in your pages directory, you have basic routing that works without additional configuration, it automatically generates the vue-router configuration.
With <NuxtLink> the navigation is easy to do, it works like the <a> tag in HTML.
With Nuxt managing the rooting system is your last worry.
4. SEO-friendly 💯
When a SPA is loaded on the browser, the server sends only basic HTML without any rendered content.
This practice causes that when the search engine bots crawl your page, they only get that bare HTML code with no content whatsoever. There is no data that bots can use to index your page.
But on the other hand Nuxt is perfect for a project wanting to have excellent SEO.
With Nuxt, you can control many factors that impact SEO and page ranking.
Unlike other SPAs, Nuxt fills in the gaps and makes the process of creating an SEO friendly app easy and enjoyable.
5. Great community support 👥
One important thing when choosing a technology is the community support behind it, because you always need a community to grow together.
With Nuxt you won't be lost.
The documentation on the official site is one of the best I have encountered, everything is clear. In addition to that there is a wide variety of modules available which will facilitate the development of your application & the community is almost everywhere but especially on Discord ready to step in and help you solve problems.
⌛ Conclusion
You will probably have noticed my website was made with Nuxt and it is thanks to all these advantages that I have Nuxt one of my favorite tools to develop powerful applications.
But despite all these good reasons, Nuxt also has some cons that will cause some to favor other technos.
Happy coding 🙌
https://dev.to/daoodaba975/5-good-reasons-to-use-nuxtjs-3fp2
Nuxt.js is a free and open source JavaScript framework based on Vue and Node JS.
It allows a simplification, an optimization and also an acceleration of the development of applications. Nuxt simplifies the development of universal or single page Vue apps.
I love it for his flexibility and ultra modular architecture.
If you are not yet convinced by this technology, here are 5 good reasons to use Nuxt.js for your next project :
1. Create universal apps easily 🌍
Building universal applications can be tedious because you have to do a lot of configuration server side and client side.
The framework came with the advantage of developing high performance universal applications with the particularity of being able to execute its code on both the server side and client side.
Nuxt is self-configured and ready to use. With editable default configurations, they allow you to start a project with a base without having to worry about additional settings to be made.
With all of these benefits, creating a universal app with Nuxt just got so easy.
2. Quickness ⚡
The advantage of rendering on the server side and on the client side makes it possible to have a powerful and very responsive application. Nuxt also allows us to have a wide range of modules available created by the community that allow us to have high performance applications in speed.
But like everything, you should not overdo it in the risk of impacting the performance of your applications.
3. File System Routing 🚧
The System File Routing with Nuxt is just magic.
When you create a .vue file in your pages directory, you have basic routing that works without additional configuration, it automatically generates the vue-router configuration.
With <NuxtLink> the navigation is easy to do, it works like the <a> tag in HTML.
With Nuxt managing the rooting system is your last worry.
4. SEO-friendly 💯
When a SPA is loaded on the browser, the server sends only basic HTML without any rendered content.
This practice causes that when the search engine bots crawl your page, they only get that bare HTML code with no content whatsoever. There is no data that bots can use to index your page.
But on the other hand Nuxt is perfect for a project wanting to have excellent SEO.
With Nuxt, you can control many factors that impact SEO and page ranking.
Unlike other SPAs, Nuxt fills in the gaps and makes the process of creating an SEO friendly app easy and enjoyable.
5. Great community support 👥
One important thing when choosing a technology is the community support behind it, because you always need a community to grow together.
With Nuxt you won't be lost.
The documentation on the official site is one of the best I have encountered, everything is clear. In addition to that there is a wide variety of modules available which will facilitate the development of your application & the community is almost everywhere but especially on Discord ready to step in and help you solve problems.
⌛ Conclusion
You will probably have noticed my website was made with Nuxt and it is thanks to all these advantages that I have Nuxt one of my favorite tools to develop powerful applications.
But despite all these good reasons, Nuxt also has some cons that will cause some to favor other technos.
Happy coding 🙌
Menampilkan Raw Html Di Vue
https://dev.to/medan_in_code/menampilkan-raw-html-di-vue-3jka
Tutorial kali ini cukup mudah,hanya bagaimana kita menampilkan html mentah atau biasa dibilang orang, raw html.
Jika kita punya variabel yang berisi tag html,seperti dibawah ini.
textHtml: `<b>Ini teks bold</b>`
lalu menampilkan seperti ini.
<p>{{textHtml}}</p>
Maka akan keluar hasil seperti dibawah.
Bisa dilihat tag tidak terrender.Jika ingin variabel tersebut terrender kita harus menggunakan directive bernama v-html.
Sehingga kode kita menjadi.
<p><span v-html="textHtml"></span></p>
atau bisa langsung di tag
<p v-html="textHtml"></p>
Hasil yang kita dapatkan seperti gambar dibawah,tag html akan ikut dirender.
Sekian tutorial kali ini,saya rasa cukup mudah membuatnya di vue, karena hanya menambahkan directive v-html.
https://dev.to/medan_in_code/menampilkan-raw-html-di-vue-3jka
Tutorial kali ini cukup mudah,hanya bagaimana kita menampilkan html mentah atau biasa dibilang orang, raw html.
Jika kita punya variabel yang berisi tag html,seperti dibawah ini.
textHtml: `<b>Ini teks bold</b>`
lalu menampilkan seperti ini.
<p>{{textHtml}}</p>
Maka akan keluar hasil seperti dibawah.
Bisa dilihat tag tidak terrender.Jika ingin variabel tersebut terrender kita harus menggunakan directive bernama v-html.
Sehingga kode kita menjadi.
<p><span v-html="textHtml"></span></p>
atau bisa langsung di tag
<p v-html="textHtml"></p>
Hasil yang kita dapatkan seperti gambar dibawah,tag html akan ikut dirender.
Sekian tutorial kali ini,saya rasa cukup mudah membuatnya di vue, karena hanya menambahkan directive v-html.
DEV Community
Menampilkan Raw Html Di Vue
Tutorial kali ini cukup mudah,hanya bagaimana kita menampilkan html mentah atau biasa dibilang orang,...
Getting rid of NgModule in Angular. Javascript
https://dev.to/this-is-angular/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.
https://dev.to/this-is-angular/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.
DEV Community
Getting rid of NgModule in Angular. Javascript
Working many years with angular I found it hard to create the structure of a project. The main reason...
Exploring the Front-end Ecosystems by Numbers
https://abimaelbarea.medium.com/exploring-the-front-end-ecosystems-by-numbers-a19a90b2a73b?source=rss------vuejs-5
A deep comparison of Angular, React, and Vue.Continue reading on Medium »
https://abimaelbarea.medium.com/exploring-the-front-end-ecosystems-by-numbers-a19a90b2a73b?source=rss------vuejs-5
A deep comparison of Angular, React, and Vue.Continue reading on Medium »
Nuxt 3 + Apollo Client
https://dev.to/joshwcorbett/nuxt-3-apollo-client-h6
If you're working on a Nuxt 3 project, and trying to get Apollo up and running, only to find that the nuxt module isn't updated yet for v3, then follow along.
As of late 2021 and early 2022, the Nuxt Community Apollo module is still in limbo for an update to play along with Nuxt 3, and I'm not patient enough to wait many more months for that. The question of why I'm bothering with Nuxt 3 this early on, is irrelevant, I merely just want to play around with it.
This is an extremely minimal demonstration, and should by no means be used for production without extra configuration.
Assuming you already have a Nuxt 3 project ready, let's move on to step 1.
Part 1: Installing the Dependencies
We'll use both @apollo/client and vue-apollo which is updated to work with Vue 3, and therefore willl work fine inside our Nuxt 3 project.
yarn add vue-apollo @apollo/client graphql
Part 2: Creating the Plugin
If you don't already have a plugin folder in your root directory, make one and create a js file inside to represent your Apollo Client
root/
- components/
- api/
- pages/
- plugins/ <--
- apollo-client.js <--
- etc...
apollo-client.js
import { defineNuxtPlugin } from "#app"
import { ApolloClient, InMemoryCache } from "@apollo/client/core"
import { DefaultApolloClient } from "@vue/apollo-composable"
export default defineNuxtPlugin((nuxtApp) => {
const apolloClient = new ApolloClient({
cache: new InMemoryCache()
// configuration //
})
nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
})
Part 3: Configuration
To keep things secure, I recommend using environment variables to store your api keys and credentials.
.env
API_ENDPOINT="https://your-api.com"
In our apollo-client.js file, populate your config with
const apolloClient = new ApolloClient({
cache: new InMemoryCache(),
uri: process.env.API_ENDPOINT <-- add your uri
// other configuration
})
You can read up on ways to configure your apollo client here: https://www.apollographql.com/docs/devtools/apollo-config/
Part 4: Nuxt Configuration
Almost nothing needs to be done here, Nuxt automatically imports your javascript files located in the plugins/ folder. We do still need to add to our build config.
In our build config in nuxt.config.js:
build: {
transpile: [
'@apollo/client',
'ts-invariant/process',
],
},
If you do not add @apollo/client and ts-invariant/process into transpile, you will face an error.
Part 5: Using Apollo
I've created a query in our api/folder called queries.js
import { gql } from "@apollo/client/core"
export const GET_POSTS = gql`
query posts {
posts (first: 20) {
id
title
}
}
`
In our Vue file, let's import useQuery from vue-apollo
import { useQuery, useResult } from '@vue/apollo-composable'
import { GET_POSTS } from '@/api/queries'
const { loading, result } = useQuery(GET_POSTS)
Conclusion
This is merely just a minimal demonstration of how to get apollo up and running with your Nuxt 3 project, not a fleshed out or production-ready solution. If you'd like to have a more official solution that doesn't involve creating your own plugin, either wait for Nuxt 3 support on the official Apollo Nuxt Module, or check out this module I found on Github.
Thanks for Reading
I hope this was helpful.
https://dev.to/joshwcorbett/nuxt-3-apollo-client-h6
If you're working on a Nuxt 3 project, and trying to get Apollo up and running, only to find that the nuxt module isn't updated yet for v3, then follow along.
As of late 2021 and early 2022, the Nuxt Community Apollo module is still in limbo for an update to play along with Nuxt 3, and I'm not patient enough to wait many more months for that. The question of why I'm bothering with Nuxt 3 this early on, is irrelevant, I merely just want to play around with it.
This is an extremely minimal demonstration, and should by no means be used for production without extra configuration.
Assuming you already have a Nuxt 3 project ready, let's move on to step 1.
Part 1: Installing the Dependencies
We'll use both @apollo/client and vue-apollo which is updated to work with Vue 3, and therefore willl work fine inside our Nuxt 3 project.
yarn add vue-apollo @apollo/client graphql
Part 2: Creating the Plugin
If you don't already have a plugin folder in your root directory, make one and create a js file inside to represent your Apollo Client
root/
- components/
- api/
- pages/
- plugins/ <--
- apollo-client.js <--
- etc...
apollo-client.js
import { defineNuxtPlugin } from "#app"
import { ApolloClient, InMemoryCache } from "@apollo/client/core"
import { DefaultApolloClient } from "@vue/apollo-composable"
export default defineNuxtPlugin((nuxtApp) => {
const apolloClient = new ApolloClient({
cache: new InMemoryCache()
// configuration //
})
nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
})
Part 3: Configuration
To keep things secure, I recommend using environment variables to store your api keys and credentials.
.env
API_ENDPOINT="https://your-api.com"
In our apollo-client.js file, populate your config with
const apolloClient = new ApolloClient({
cache: new InMemoryCache(),
uri: process.env.API_ENDPOINT <-- add your uri
// other configuration
})
You can read up on ways to configure your apollo client here: https://www.apollographql.com/docs/devtools/apollo-config/
Part 4: Nuxt Configuration
Almost nothing needs to be done here, Nuxt automatically imports your javascript files located in the plugins/ folder. We do still need to add to our build config.
In our build config in nuxt.config.js:
build: {
transpile: [
'@apollo/client',
'ts-invariant/process',
],
},
If you do not add @apollo/client and ts-invariant/process into transpile, you will face an error.
Part 5: Using Apollo
I've created a query in our api/folder called queries.js
import { gql } from "@apollo/client/core"
export const GET_POSTS = gql`
query posts {
posts (first: 20) {
id
title
}
}
`
In our Vue file, let's import useQuery from vue-apollo
import { useQuery, useResult } from '@vue/apollo-composable'
import { GET_POSTS } from '@/api/queries'
const { loading, result } = useQuery(GET_POSTS)
Conclusion
This is merely just a minimal demonstration of how to get apollo up and running with your Nuxt 3 project, not a fleshed out or production-ready solution. If you'd like to have a more official solution that doesn't involve creating your own plugin, either wait for Nuxt 3 support on the official Apollo Nuxt Module, or check out this module I found on Github.
Thanks for Reading
I hope this was helpful.
DEV Community
Nuxt 3 + Apollo Client
Here's how to get apollo client up and running with nuxt 3.
Learn how to set up Vue with Tailwind CSS and Flowbite
https://medium.com/themesberg-blog/learn-how-to-set-up-vue-with-tailwind-css-and-flowbite-a3e46835e686?source=rss------vuejs-5
Vue.js is a popular front-end library used by websites such as Behance, Nintendo, Gitlab, Font Awesome, and more that you can use to build…Continue reading on Themesberg Blog »
https://medium.com/themesberg-blog/learn-how-to-set-up-vue-with-tailwind-css-and-flowbite-a3e46835e686?source=rss------vuejs-5
Vue.js is a popular front-end library used by websites such as Behance, Nintendo, Gitlab, Font Awesome, and more that you can use to build…Continue reading on Themesberg Blog »
Customizing the Apostrophe Admin UI
https://apostrophecms.medium.com/customizing-the-apostrophe-admin-ui-e2d5e1929d3b?source=rss------vuejs-5
This guide focuses on how to customize Apostrophe’s administrative user interface, or “admin UI.” The built-in functionality covers most…Continue reading on Medium »
https://apostrophecms.medium.com/customizing-the-apostrophe-admin-ui-e2d5e1929d3b?source=rss------vuejs-5
This guide focuses on how to customize Apostrophe’s administrative user interface, or “admin UI.” The built-in functionality covers most…Continue reading on Medium »
Improve $destroy performance in Vue
https://dev.to/przemyslawjanpietrzak/improve-destroy-performance-in-vue-1o5f
Introduction
Vue in most of the cases is a fast enough framework. However, the time of nodes destruction can be very long. Of course removing elements from DOM is fast operation but Vue needs to remove all watchers from destruct component and that may take up to several seconds.
Case
Component with nested navigation with 12 groups each has ~20 children. After opening all groups, navigation has ~240 items. After user tries to navigate to another view browser freezes for a couple of seconds.
Navigation
- Group x12
- Item x20
Investigation
Open chromium dev tools, go to the performance section and set CPU: 4x slower after that browser will behave as on an average user computer.
Then record the destruction of navigation. The result:
Oh my God almost 7 seconds of destroy and 0.65 s of update (before destroy) o.O
In the main $destroy there’s many shorter $destroys and all of them have many removeSub calls. Each of removeSub takes 7–15 ms, not much but in total it’s much time of browser freeze.
Reason
Component Item.vue is bind to 5 high order vuex getters was rendered around 240 times.
// Item.vue
...mapGetters('namespace', [
'getA',
'getB',
'getC',
'getD',
'getE',
});
Also Item.vue has 8 computed properties and 5 of them use vuex getters. All this operations are not expensive, however create many subscriptions. And these subscriptions have to be cleared.
Solution
Moving all computed props and vuex bindings from Item.vue into Group.vue . Group.vue is rendering many Item.vues so we have to map collection of item like this:
Result
Time of $destroy reduced from ~7s to 0.3s (-96%). Also update before it wad reduced from 0.65s to 0.45 (-30%). Notice that is not a perfect solution: because mapper should move to Navigation.vue add pass Group.vue as prop. However moving calculation of a, b, c, d, e will “only” reduced bindings by 55 (12 * 5 – 5). This performance is not great but not terrible.
Conclusion
In vue loading data from store to component is pretty easy: just ...mapGetters('namespace', ['getter']), but not all components should know about the store. Before React’s hooks was very popular to write container that connect data from Redux by mapStateToProps and mapDispatchToPros with a component. It was a lot of boilerplate and thank goodness we can use now useReducer however it has one advantage: get the developer to think about where to put the connection with store. In my opinion we still must care about it because separation of components into logic and presentation is important not only to keep code clean but also for performance purposes.
https://dev.to/przemyslawjanpietrzak/improve-destroy-performance-in-vue-1o5f
Introduction
Vue in most of the cases is a fast enough framework. However, the time of nodes destruction can be very long. Of course removing elements from DOM is fast operation but Vue needs to remove all watchers from destruct component and that may take up to several seconds.
Case
Component with nested navigation with 12 groups each has ~20 children. After opening all groups, navigation has ~240 items. After user tries to navigate to another view browser freezes for a couple of seconds.
Navigation
- Group x12
- Item x20
Investigation
Open chromium dev tools, go to the performance section and set CPU: 4x slower after that browser will behave as on an average user computer.
Then record the destruction of navigation. The result:
Oh my God almost 7 seconds of destroy and 0.65 s of update (before destroy) o.O
In the main $destroy there’s many shorter $destroys and all of them have many removeSub calls. Each of removeSub takes 7–15 ms, not much but in total it’s much time of browser freeze.
Reason
Component Item.vue is bind to 5 high order vuex getters was rendered around 240 times.
// Item.vue
...mapGetters('namespace', [
'getA',
'getB',
'getC',
'getD',
'getE',
});
Also Item.vue has 8 computed properties and 5 of them use vuex getters. All this operations are not expensive, however create many subscriptions. And these subscriptions have to be cleared.
Solution
Moving all computed props and vuex bindings from Item.vue into Group.vue . Group.vue is rendering many Item.vues so we have to map collection of item like this:
Result
Time of $destroy reduced from ~7s to 0.3s (-96%). Also update before it wad reduced from 0.65s to 0.45 (-30%). Notice that is not a perfect solution: because mapper should move to Navigation.vue add pass Group.vue as prop. However moving calculation of a, b, c, d, e will “only” reduced bindings by 55 (12 * 5 – 5). This performance is not great but not terrible.
Conclusion
In vue loading data from store to component is pretty easy: just ...mapGetters('namespace', ['getter']), but not all components should know about the store. Before React’s hooks was very popular to write container that connect data from Redux by mapStateToProps and mapDispatchToPros with a component. It was a lot of boilerplate and thank goodness we can use now useReducer however it has one advantage: get the developer to think about where to put the connection with store. In my opinion we still must care about it because separation of components into logic and presentation is important not only to keep code clean but also for performance purposes.
DEV Community
Improve $destroy performance in Vue
Introduction Vue in most of the cases is a fast enough framework. However, the time of...
You Shouldn’t be Using Mixins in Vue.js Anymore
https://javascript.plainenglish.io/you-shouldnt-be-using-mixins-in-vue-js-anymore-ec8c09824f9f?source=rss------vuejs-5
Use the Composition API to migrate from MixinsContinue reading on JavaScript in Plain English »
https://javascript.plainenglish.io/you-shouldnt-be-using-mixins-in-vue-js-anymore-ec8c09824f9f?source=rss------vuejs-5
Use the Composition API to migrate from MixinsContinue reading on JavaScript in Plain English »