Building an Electron App with VueJS and Vite
https://codybontecou.medium.com/building-an-electron-app-with-vuejs-and-vite-6f41e2d7587f?source=rss------vuejs-5
Continue reading on Medium »
https://codybontecou.medium.com/building-an-electron-app-with-vuejs-and-vite-6f41e2d7587f?source=rss------vuejs-5
Continue reading on Medium »
Global State Management in an Electron Application
https://codybontecou.medium.com/global-state-management-in-an-electron-application-abdac1a1ce52?source=rss------vuejs-5
Continue reading on Medium »
https://codybontecou.medium.com/global-state-management-in-an-electron-application-abdac1a1ce52?source=rss------vuejs-5
Continue reading on Medium »
Integrating Vue Devtools into an Electron Application
https://dev.to/codybontecou/integrating-vue-devtools-into-an-electron-application-44db
Integrating Vue Devtools into an Electron Application
Bringing the VueJS devtools into our Electron application to help debug. This post assumes you have followed along with my previous post.
Installation
Vue Devtools provides a non-browser specific version of their devtools that they call standalone.
You can install the package globally:
npm install -g @vue/devtools
# Or with yarn
yarn global add @vue/devtools
Or within your project as a dependency:
npm install --save-dev @vue/devtools
# Or with yarn
yarn add -D @vue/devtools
Using the VueJS devtools globally
Once installed globally, you can now run the command vue-devtools on your command line.
This will spawn an instance of the devtools within its own window.
Now, add the following to the <head> section of your applications HTML file:
<script src="https://localhost:8098"></script>
If you want to debug your application remotely, use the following code snippet instead:
<script>
window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="https://<your-local-ip>:8098"></script>
Don't forget to remove this code before deploying to production!
Once your application has the appropriate script tag within its HTML, run it without killing the terminal that is running vue-devtools.
In our case,
npm run dev
Running the Vue Devtools as a dependency
Within your project directory, run the following command should spawn the devtools:
./node_modules/.bin/vue-devtools
For convenience sake and ease-of-use, I moved the ./node_modules/.bin/vue-devtools command into my package.json scripts:
"devtools": "./node_modules/.bin/vue-devtools"
When using the devtools as a local dependency, we do not need the script tag within our <head>
Remove this code snippet if you added it earlier:
<script src="https://localhost:8098"></script>
You should be all set up now. If you need additional help, check out their documentation or their GitHub repo documentation.
Hope you enjoyed it!
https://dev.to/codybontecou/integrating-vue-devtools-into-an-electron-application-44db
Integrating Vue Devtools into an Electron Application
Bringing the VueJS devtools into our Electron application to help debug. This post assumes you have followed along with my previous post.
Installation
Vue Devtools provides a non-browser specific version of their devtools that they call standalone.
You can install the package globally:
npm install -g @vue/devtools
# Or with yarn
yarn global add @vue/devtools
Or within your project as a dependency:
npm install --save-dev @vue/devtools
# Or with yarn
yarn add -D @vue/devtools
Using the VueJS devtools globally
Once installed globally, you can now run the command vue-devtools on your command line.
This will spawn an instance of the devtools within its own window.
Now, add the following to the <head> section of your applications HTML file:
<script src="https://localhost:8098"></script>
If you want to debug your application remotely, use the following code snippet instead:
<script>
window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="https://<your-local-ip>:8098"></script>
Don't forget to remove this code before deploying to production!
Once your application has the appropriate script tag within its HTML, run it without killing the terminal that is running vue-devtools.
In our case,
npm run dev
Running the Vue Devtools as a dependency
Within your project directory, run the following command should spawn the devtools:
./node_modules/.bin/vue-devtools
For convenience sake and ease-of-use, I moved the ./node_modules/.bin/vue-devtools command into my package.json scripts:
"devtools": "./node_modules/.bin/vue-devtools"
When using the devtools as a local dependency, we do not need the script tag within our <head>
Remove this code snippet if you added it earlier:
<script src="https://localhost:8098"></script>
You should be all set up now. If you need additional help, check out their documentation or their GitHub repo documentation.
Hope you enjoyed it!
DEV Community
Integrating Vue Devtools into an Electron Application
Integrating Vue Devtools into an Electron Application Bringing the VueJS devtools into...
Integrating Vue Devtools into an Electron Application
https://codybontecou.medium.com/integrating-vue-devtools-into-an-electron-application-cb26d70729cf?source=rss------vuejs-5
Continue reading on Medium »
https://codybontecou.medium.com/integrating-vue-devtools-into-an-electron-application-cb26d70729cf?source=rss------vuejs-5
Continue reading on Medium »
A new stack - from Vue.js to Svelte & more
https://dev.to/sschuchlenz/a-new-stack-from-vuejs-to-svelte-more-4gn6
Recently I gave Svelte a shot after I neglected it for quite some time (just basically tested it out right when it came out but decided that at the time, it wasn't for me).
Boy was I surprised! After working extensively with React and then Vue.js for quite some time, meandering to stuff like gridsome and nuxt.js in the process I was really surprised how amazing Svelte and SvelteKit have become.
Since at my company we are currently bootstrapping a new e-commerce startup I've decided to go with a totally new stack (at least for the MVP) and if this is interesting for you guys, I'm thinking about making a series of posts documenting the journey - so drop me a line or fave this if you like it ;)
The components
Currently I'm not yet 100% sure which components to pick from the selection since we're still evaluating everything for the project but here's the shortlist:
backend-as-a-service with graphCMS or cosmicJS
authentication-as-a-service with Auth0
e-commerce with CommerceLayer or Vendure
frontend with Svelte
graphQL and REST for the data
What I absolutely like about Svelte is that components are really readable and since it all boils down to plain vanilla javascript it just feels a lot lighter than Vue or React. I also love that it plays nice with one of our main staples, Tailwind CSS, and that the local dev environment is blazingly fast.
https://dev.to/sschuchlenz/a-new-stack-from-vuejs-to-svelte-more-4gn6
Recently I gave Svelte a shot after I neglected it for quite some time (just basically tested it out right when it came out but decided that at the time, it wasn't for me).
Boy was I surprised! After working extensively with React and then Vue.js for quite some time, meandering to stuff like gridsome and nuxt.js in the process I was really surprised how amazing Svelte and SvelteKit have become.
Since at my company we are currently bootstrapping a new e-commerce startup I've decided to go with a totally new stack (at least for the MVP) and if this is interesting for you guys, I'm thinking about making a series of posts documenting the journey - so drop me a line or fave this if you like it ;)
The components
Currently I'm not yet 100% sure which components to pick from the selection since we're still evaluating everything for the project but here's the shortlist:
backend-as-a-service with graphCMS or cosmicJS
authentication-as-a-service with Auth0
e-commerce with CommerceLayer or Vendure
frontend with Svelte
graphQL and REST for the data
What I absolutely like about Svelte is that components are really readable and since it all boils down to plain vanilla javascript it just feels a lot lighter than Vue or React. I also love that it plays nice with one of our main staples, Tailwind CSS, and that the local dev environment is blazingly fast.
DEV Community
A new stack - from Vue.js to Svelte & more
Recently I gave Svelte a shot after I neglected it for quite some time (just basically tested it out...
Comparing a custom date component in Vuejs and Vanilla JavaScript
https://pablo-curell-mompo.medium.com/comparing-a-custom-date-component-in-vuejs-and-vanilla-javascript-95d984485989?source=rss------vuejs-5
Recently we had reason to rework how we collect birthdates (and other dates at Seraphin). While the default browser implementation can do…Continue reading on Medium »
https://pablo-curell-mompo.medium.com/comparing-a-custom-date-component-in-vuejs-and-vanilla-javascript-95d984485989?source=rss------vuejs-5
Recently we had reason to rework how we collect birthdates (and other dates at Seraphin). While the default browser implementation can do…Continue reading on Medium »
Nuxt: скорость и seo для интернет-магазина
https://habr.com/ru/post/596151/?utm_campaign=596151&utm_source=habrahabr&utm_medium=rss
Скорость загрузки сайта и правильное считывание страниц роботами поисковых систем — краеугольный камень для успешного интернет-магазина, за эти показатели борются разработчики. Оба фактора влияют на ранжирование в поисковой выдаче, а отдельно скорость предопределяет поведение пользователей. Сейчас мы работаем над e-commerce платформой для большой сети розничных магазинов. Привычное для нас и клиента решение — магазин на базе Битрикса — не подходило для проекта. И мы обратили свое внимание на Nuxt. Читать далее
https://habr.com/ru/post/596151/?utm_campaign=596151&utm_source=habrahabr&utm_medium=rss
Скорость загрузки сайта и правильное считывание страниц роботами поисковых систем — краеугольный камень для успешного интернет-магазина, за эти показатели борются разработчики. Оба фактора влияют на ранжирование в поисковой выдаче, а отдельно скорость предопределяет поведение пользователей. Сейчас мы работаем над e-commerce платформой для большой сети розничных магазинов. Привычное для нас и клиента решение — магазин на базе Битрикса — не подходило для проекта. И мы обратили свое внимание на Nuxt. Читать далее
Хабр
Nuxt: скорость и seo для интернет-магазина
Автор: Павел Волков, тимлид Скорость загрузки сайта и правильное считывание страниц роботами поисковых систем — краеугольный камень для успешного интернет-магазина, за эти показатели борются...
Vue ile custom input komponentinde Two-Way Binding yöntemleri
https://medium.com/@korkacserkan/vue-ile-custom-input-komponentinde-two-way-binding-y%C3%B6ntemleri-100dd4165d47?source=rss------vuejs-5
1.yol $listenersContinue reading on Medium »
https://medium.com/@korkacserkan/vue-ile-custom-input-komponentinde-two-way-binding-y%C3%B6ntemleri-100dd4165d47?source=rss------vuejs-5
1.yol $listenersContinue reading on Medium »
React vs Vue: What is the Best Framework for your Project in 2022?
https://dev.to/ravgeetdhillon/react-vs-vue-what-is-the-best-framework-for-your-project-in-2022-5d6h
React and Vue are rising stars in the JavaScript front-end frameworks ecosystem. React is backed by Facebook, and Vue is completely a community-driven project. The choices that React developers and Vue developers make have consequences as the project size grows, but they may not realize them when they first pick up on over the other.
Both React and Vue can accomplish the same thing. However, they provide different paths to reach the final destination. In this article, you'll look at different comparisons that will help you differentiate between React and Vue and ultimately help you decide which one you should choose in your future projects.
Read the full blog on Adeva.
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
https://dev.to/ravgeetdhillon/react-vs-vue-what-is-the-best-framework-for-your-project-in-2022-5d6h
React and Vue are rising stars in the JavaScript front-end frameworks ecosystem. React is backed by Facebook, and Vue is completely a community-driven project. The choices that React developers and Vue developers make have consequences as the project size grows, but they may not realize them when they first pick up on over the other.
Both React and Vue can accomplish the same thing. However, they provide different paths to reach the final destination. In this article, you'll look at different comparisons that will help you differentiate between React and Vue and ultimately help you decide which one you should choose in your future projects.
Read the full blog on Adeva.
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
DEV Community
React vs Vue: What is the Best Framework for your Project in 2022?
React and Vue are rising stars in the JavaScript front-end frameworks ecosystem. React is backed by...
Avoid trusting const in JavaScript
https://medium.com/front-end-weekly/avoid-trusting-const-in-javascript-69c1c0b59942?source=rss------vuejs-5
Hello World!!! 🌏Continue reading on Frontend Weekly »
https://medium.com/front-end-weekly/avoid-trusting-const-in-javascript-69c1c0b59942?source=rss------vuejs-5
Hello World!!! 🌏Continue reading on Frontend Weekly »
Javascript “this” keyword, Explained in terms of invocation patterns.
https://medium.com/@aflahaliC/javascript-this-keyword-explained-in-terms-of-invocation-patterns-8bf4e2d70cec?source=rss------vuejs-5
For a Javascript developer, this keyword wont be an unfamiliar term. The behaviour of this will be a bit confusing for a newcomer to…Continue reading on Medium »
https://medium.com/@aflahaliC/javascript-this-keyword-explained-in-terms-of-invocation-patterns-8bf4e2d70cec?source=rss------vuejs-5
For a Javascript developer, this keyword wont be an unfamiliar term. The behaviour of this will be a bit confusing for a newcomer to…Continue reading on Medium »
UX Case Study: The journey of making Task7
https://medium.com/@alsalem.yousef/ux-case-study-the-journey-of-making-task7-ab6d15314cf9?source=rss------vuejs-5
Discovery PhaseContinue reading on Medium »
https://medium.com/@alsalem.yousef/ux-case-study-the-journey-of-making-task7-ab6d15314cf9?source=rss------vuejs-5
Discovery PhaseContinue reading on Medium »
How to build a Vue-based micro-frontends infrastructure
https://medium.com/js-dojo/how-to-build-a-vue-based-micro-frontends-infrastructure-5a7729d5ed9?source=rss------vuejs-5
Micro-frontend infrastructure can help you create better applications, regardless if you want to replace the app’s framework or not.Continue reading on Vue.js Developers »
https://medium.com/js-dojo/how-to-build-a-vue-based-micro-frontends-infrastructure-5a7729d5ed9?source=rss------vuejs-5
Micro-frontend infrastructure can help you create better applications, regardless if you want to replace the app’s framework or not.Continue reading on Vue.js Developers »
Vuejs history
https://madhusha.medium.com/vuejs-history-865eb1bba386?source=rss------vuejs-5
Vue.js is an easy-to-use web app framework that we can use to develop interactive front-end apps.Continue reading on Medium »
https://madhusha.medium.com/vuejs-history-865eb1bba386?source=rss------vuejs-5
Vue.js is an easy-to-use web app framework that we can use to develop interactive front-end apps.Continue reading on Medium »
How to Add Icon and Splash Screen to your Ionic App
https://medium.com/@simonescigliuzzi/how-to-add-icon-and-splash-screen-to-your-ionic-app-ccec37240934?source=rss------vuejs-5
The first thing we all think about, when we start creating a brand new App is “what icon could I use to it?”Continue reading on Medium »
https://medium.com/@simonescigliuzzi/how-to-add-icon-and-splash-screen-to-your-ionic-app-ccec37240934?source=rss------vuejs-5
The first thing we all think about, when we start creating a brand new App is “what icon could I use to it?”Continue reading on Medium »
Vuex Nedir? Vuex’in Temelleri
https://medium.com/@sinancam/vuex-nedir-vuexin-temelleri-1a7701d0a4e5?source=rss------vuejs-5
Vuex, uygulamalarımızda karmaşık bileşen yapısındaki state’leri (durumları) yönetmek için kullanılan bir vue.js kütüphanedir. State’in…Continue reading on Medium »
https://medium.com/@sinancam/vuex-nedir-vuexin-temelleri-1a7701d0a4e5?source=rss------vuejs-5
Vuex, uygulamalarımızda karmaşık bileşen yapısındaki state’leri (durumları) yönetmek için kullanılan bir vue.js kütüphanedir. State’in…Continue reading on Medium »
Top 5 NuxtJS modules for your next project [2022 edition]
https://dev.to/patik123/top-5-nuxtjs-modules-for-your-next-project-2022-edition-2nf
NuxtJS
[NuxtJs]((https://nuxtjs.org) is a JavaScript framework based on the VueJS framework. It enables us to develop both static and server-side rendered pages. It appears to be a fantastic enhancement to Vue.js. I even developed a mobile app for my school using NuxtJS as a research project this week, and I think it's a fantastic framework. Vue 3 was released a few months ago, and it offers a lot of new features. I haven't tried it yet, but I plan to do so soon.
I hope you will try NuxtJS.
PWA
We'd want to bring the website closer to the user today. One possibility is to persuade a visitor to return to our website so that they may download it and use it as a conventional desktop program.
We can use progressive web apps technology to aid us here since it allows us to install on the device.
We can utilize a pre-written module that handles practically all of the work for us if we want to construct a progressive web application using NuxtJS.
Documentation
GitHub repo
i18n
Website localization has become commonplace, allowing users to have a far superior user experience than viewing a page in a foreign language.
The NuxtJS framework provides a module that allows us to convert our site into additional languages with less effort. We can create a website in several languages with only a few lines of code using it.
Documentation
GitHub repo
Axios
Data is often received by the interactive site via API calls and other internet services.
Axios is a well-known JavaScript library for implementing HTTP requests in the browser.
In addition to performing HTTP requests, the Axios library for NuxtJS allows us to write our functions.
Documentation
GitHub repo
Content
However, when we use the JAM stack to create our blog, we can use the Content module for NuxtJS. Its primary role is to convert Markdown files to HTML, but the module provides even more functionality, such as searching for articles in the same way as MongoDB does, highlining code, and so on.
The content module is ideal for generating blogs and website documentation.
Documentation
GitHub repo
Auth
User login and identification functions are now available in almost every program. This procedure is straightforward in NuxtJS since the Auth module makes it easier for us. Simultaneously, it enables us to construct a login using pre-configured OAuth 2 providers, however, we may also create our providers.
Documentation
GitHub
I hope this article has helped you decide which NuxtJS modules to utilize in your next project. Visit this website for more modules and be sure to discover something that interests you.
You can start following me on Twitter if you enjoy the article and share it. I'll gladly add my two cents as well.
https://dev.to/patik123/top-5-nuxtjs-modules-for-your-next-project-2022-edition-2nf
NuxtJS
[NuxtJs]((https://nuxtjs.org) is a JavaScript framework based on the VueJS framework. It enables us to develop both static and server-side rendered pages. It appears to be a fantastic enhancement to Vue.js. I even developed a mobile app for my school using NuxtJS as a research project this week, and I think it's a fantastic framework. Vue 3 was released a few months ago, and it offers a lot of new features. I haven't tried it yet, but I plan to do so soon.
I hope you will try NuxtJS.
PWA
We'd want to bring the website closer to the user today. One possibility is to persuade a visitor to return to our website so that they may download it and use it as a conventional desktop program.
We can use progressive web apps technology to aid us here since it allows us to install on the device.
We can utilize a pre-written module that handles practically all of the work for us if we want to construct a progressive web application using NuxtJS.
Documentation
GitHub repo
i18n
Website localization has become commonplace, allowing users to have a far superior user experience than viewing a page in a foreign language.
The NuxtJS framework provides a module that allows us to convert our site into additional languages with less effort. We can create a website in several languages with only a few lines of code using it.
Documentation
GitHub repo
Axios
Data is often received by the interactive site via API calls and other internet services.
Axios is a well-known JavaScript library for implementing HTTP requests in the browser.
In addition to performing HTTP requests, the Axios library for NuxtJS allows us to write our functions.
Documentation
GitHub repo
Content
However, when we use the JAM stack to create our blog, we can use the Content module for NuxtJS. Its primary role is to convert Markdown files to HTML, but the module provides even more functionality, such as searching for articles in the same way as MongoDB does, highlining code, and so on.
The content module is ideal for generating blogs and website documentation.
Documentation
GitHub repo
Auth
User login and identification functions are now available in almost every program. This procedure is straightforward in NuxtJS since the Auth module makes it easier for us. Simultaneously, it enables us to construct a login using pre-configured OAuth 2 providers, however, we may also create our providers.
Documentation
GitHub
I hope this article has helped you decide which NuxtJS modules to utilize in your next project. Visit this website for more modules and be sure to discover something that interests you.
You can start following me on Twitter if you enjoy the article and share it. I'll gladly add my two cents as well.
DEV Community
Top 5 NuxtJS modules for your next project [2022 edition]
NuxtJS NuxtJs is a JavaScript framework based on the VueJS framework. It enables us to...
Pinia vs Vuex: Pinia, Vuex’e iyi bir alternatif mi?
https://medium.com/berkut-teknoloji/pinia-vs-vuex-pinia-vuexe-iyi-bir-alternatif-mi-596fbe85b8c9?source=rss------vuejs-5
Vue.js için hafif bir state yönetim kütüphanesi olan Pinia, son zamanlarda popülerlik kazanmaya başladı. State yönetimi için Vue 3'teki…Continue reading on Berkut Teknoloji »
https://medium.com/berkut-teknoloji/pinia-vs-vuex-pinia-vuexe-iyi-bir-alternatif-mi-596fbe85b8c9?source=rss------vuejs-5
Vue.js için hafif bir state yönetim kütüphanesi olan Pinia, son zamanlarda popülerlik kazanmaya başladı. State yönetimi için Vue 3'teki…Continue reading on Berkut Teknoloji »
6 Top learning resources for Vue JS, ordered methodically!
https://famzil.medium.com/6-top-learning-resources-for-vue-js-ordered-methodically-9358b5d4bd79?source=rss------vuejs-5
Where to start learning Vue JS?Continue reading on Medium »
https://famzil.medium.com/6-top-learning-resources-for-vue-js-ordered-methodically-9358b5d4bd79?source=rss------vuejs-5
Where to start learning Vue JS?Continue reading on Medium »
Lightue 0.1.2 released
https://dev.to/smalllong/lightue-012-released-115j
link to github
Lightue is a startup front-end framework inspired by Vue and React. It features in lightweight and low overhead, which makes it suitable for small personal projects. The new versions adds these new features:
function value as the getter
html shortcut methods
https://dev.to/smalllong/lightue-012-released-115j
link to github
Lightue is a startup front-end framework inspired by Vue and React. It features in lightweight and low overhead, which makes it suitable for small personal projects. The new versions adds these new features:
function value as the getter
html shortcut methods
DEV Community
Lightue 0.1.2 released
link to github Lightue is a startup front-end framework inspired by Vue and React. It features in...
How To Integrate Keycloak in VueJs/NuxtJs
https://medium.com/@anamolsoman2/how-to-integrate-keycloak-in-vuejs-nuxtjs-557cc4bcef41?source=rss------vuejs-5
Step by step guide to integrate the keycloak in VueJs/NuxtJsContinue reading on Medium »
https://medium.com/@anamolsoman2/how-to-integrate-keycloak-in-vuejs-nuxtjs-557cc4bcef41?source=rss------vuejs-5
Step by step guide to integrate the keycloak in VueJs/NuxtJsContinue reading on Medium »