Going on a virtual journey (BMW project, part 2)
https://digital-natives-budapest.iss.onedium.com/going-on-a-virtual-journey-bmw-project-part-2-faa4ba59021?source=rss------vuejs-5
“D³: DeepDiveDev” is Dina’s series of development project related articles — our teach team’s mind poured out on paper with all creativity.Continue reading on Medium »
https://digital-natives-budapest.iss.onedium.com/going-on-a-virtual-journey-bmw-project-part-2-faa4ba59021?source=rss------vuejs-5
“D³: DeepDiveDev” is Dina’s series of development project related articles — our teach team’s mind poured out on paper with all creativity.Continue reading on Medium »
Intro To Using Pinia For State Management In VueJS
https://c-innovative.medium.com/intro-to-using-pinia-for-state-management-in-vuejs-7e0e3fc8e099?source=rss------vuejs-5
Intro To Using Pinia For State Management In VueJSContinue reading on Medium »
https://c-innovative.medium.com/intro-to-using-pinia-for-state-management-in-vuejs-7e0e3fc8e099?source=rss------vuejs-5
Intro To Using Pinia For State Management In VueJSContinue reading on Medium »
Medium
Intro To Using Pinia For State Management In VueJS
Intro To Using Pinia For State Management In VueJS
How To Develop A Progressive Web Application On An Android Device
https://dev.to/unfor19/how-to-develop-a-progressive-web-application-on-an-android-device-39jj
In the past few weeks I've been wondering how the whole eco-system of a Progressive Web Application (PWA) works. As always, I need to get my hands dirty and code something to understand it.
My main goal is to provision a local development environment, which hot-reloads (code changed) the application on a physical Android device.
The main challenge was to figure out a way to access the PWA which is running on my local machine from my Android device (Samsung Galaxy S10). Why you ask? Because PWA requires HTTPS access so using IP addresses is not an option.
Ladies and gentleman, I present to you - unfor19/pwa-quasar-local
This project demonstrates how to develop a Progressive Web Application (PWA) locally on an Android device, using the Quasar Framework v2.
Final Results
I took screenshots with my Android device during the process to document the full user-experience of installing a PWA for the first time.
Accessed PWA From Android Device
The Add to Home Screen popup appears!
Clicked Add To Home Screen
Clicked Install
Installation Completed
PWA Appears On The Device's Apps List
PWA Has A Cool Splashscreen
That is thanks to Quasar which does it, as always, automatically.
First Run After Installation
The application is running on the device as if it were a "normal application".
Final Words
It was a true joy to work with Quasar since it made the whole process of generating a PWA out-of-the-box, without writing a single line of code. So head over to unfor19/pwa-quasar-local and do your PWA magic!
https://dev.to/unfor19/how-to-develop-a-progressive-web-application-on-an-android-device-39jj
In the past few weeks I've been wondering how the whole eco-system of a Progressive Web Application (PWA) works. As always, I need to get my hands dirty and code something to understand it.
My main goal is to provision a local development environment, which hot-reloads (code changed) the application on a physical Android device.
The main challenge was to figure out a way to access the PWA which is running on my local machine from my Android device (Samsung Galaxy S10). Why you ask? Because PWA requires HTTPS access so using IP addresses is not an option.
Ladies and gentleman, I present to you - unfor19/pwa-quasar-local
This project demonstrates how to develop a Progressive Web Application (PWA) locally on an Android device, using the Quasar Framework v2.
Final Results
I took screenshots with my Android device during the process to document the full user-experience of installing a PWA for the first time.
Accessed PWA From Android Device
The Add to Home Screen popup appears!
Clicked Add To Home Screen
Clicked Install
Installation Completed
PWA Appears On The Device's Apps List
PWA Has A Cool Splashscreen
That is thanks to Quasar which does it, as always, automatically.
First Run After Installation
The application is running on the device as if it were a "normal application".
Final Words
It was a true joy to work with Quasar since it made the whole process of generating a PWA out-of-the-box, without writing a single line of code. So head over to unfor19/pwa-quasar-local and do your PWA magic!
DEV Community
How To Develop A Progressive Web Application On An Android Device
In the past few weeks, I've been wondering how the whole eco-system of a Progressive Web Application...
Using axios globally in a Vue 3 with provide/inject (composition API)
https://dev.to/avxkim/using-axios-globally-in-a-vue-3-with-provideinject-composition-api-1jk5
In a Vue 2 we had to use Vue.prototype in order to add global properties to a Vue instance. But in a Vue 3 we got "Composition API" (better version of React hooks, imo 😂)
So, using a composition api, recommended way to add global properties, is by using provide/inject. Because config.globalProperties considered as an escape hatch
Let's get started.
1. Create a file called http.ts (you can name it as you wish):
import axios, { AxiosInstance } from 'axios'
const apiClient: AxiosInstance = axios.create({
baseURL: 'https://api.openbrewerydb.org',
headers: {
'Content-type': 'application/json',
},
})
export default apiClient
It's our global Axios instance with the options.
2. Create a file symbols.ts
import { InjectionKey } from 'vue'
import { AxiosInstance } from 'axios'
export const AxiosKey: InjectionKey<AxiosInstance> = Symbol('http')
This is required to type our Provide/Inject.
3. Go to main.ts
// libs
import http from '@/http'
import { AxiosKey } from '@/symbols'
const app = createApp(App)
app.provide(AxiosKey, http)
We're providing our Axios instance globally here, using InjectionKey - AxiosKey, so it's typed now. Otherwise you would have to provide types every time you use inject()
4. Create a function to deal with undefined values, when you use inject():
import { inject, InjectionKey } from 'vue'
export function injectStrict<T>(key: InjectionKey<T>, fallback?: T) {
const resolved = inject(key, fallback)
if (!resolved) {
throw new Error(`Could not resolve ${key.description}`)
}
return resolved
}
It was found in this useful blog post{:target="_blank"}
5. Using our global axios instance inside a component:
<script setup lang="ts">
import { ref, onMounted } from 'vue'
// typing inject
import { injectStrict } from '@/utils/injectTyped'
import { AxiosKey } from '@/symbols'
interface Breweries {
id: string
name: string
}
const http = injectStrict(AxiosKey) // it's typed now
const breweries = ref<Breweries[]>([])
onMounted(async () => {
const resp = await http.get<Breweries[]>('/breweries')
breweries.value = resp.data
})
</script>
https://dev.to/avxkim/using-axios-globally-in-a-vue-3-with-provideinject-composition-api-1jk5
In a Vue 2 we had to use Vue.prototype in order to add global properties to a Vue instance. But in a Vue 3 we got "Composition API" (better version of React hooks, imo 😂)
So, using a composition api, recommended way to add global properties, is by using provide/inject. Because config.globalProperties considered as an escape hatch
Let's get started.
1. Create a file called http.ts (you can name it as you wish):
import axios, { AxiosInstance } from 'axios'
const apiClient: AxiosInstance = axios.create({
baseURL: 'https://api.openbrewerydb.org',
headers: {
'Content-type': 'application/json',
},
})
export default apiClient
It's our global Axios instance with the options.
2. Create a file symbols.ts
import { InjectionKey } from 'vue'
import { AxiosInstance } from 'axios'
export const AxiosKey: InjectionKey<AxiosInstance> = Symbol('http')
This is required to type our Provide/Inject.
3. Go to main.ts
// libs
import http from '@/http'
import { AxiosKey } from '@/symbols'
const app = createApp(App)
app.provide(AxiosKey, http)
We're providing our Axios instance globally here, using InjectionKey - AxiosKey, so it's typed now. Otherwise you would have to provide types every time you use inject()
4. Create a function to deal with undefined values, when you use inject():
import { inject, InjectionKey } from 'vue'
export function injectStrict<T>(key: InjectionKey<T>, fallback?: T) {
const resolved = inject(key, fallback)
if (!resolved) {
throw new Error(`Could not resolve ${key.description}`)
}
return resolved
}
It was found in this useful blog post{:target="_blank"}
5. Using our global axios instance inside a component:
<script setup lang="ts">
import { ref, onMounted } from 'vue'
// typing inject
import { injectStrict } from '@/utils/injectTyped'
import { AxiosKey } from '@/symbols'
interface Breweries {
id: string
name: string
}
const http = injectStrict(AxiosKey) // it's typed now
const breweries = ref<Breweries[]>([])
onMounted(async () => {
const resp = await http.get<Breweries[]>('/breweries')
breweries.value = resp.data
})
</script>
DEV Community
Using axios globally in a Vue 3 with provide/inject (composition API)
In a Vue 2 we had to use Vue.prototype in order to add global properties to a Vue instance. But in a...
Your first NEAR Smart contract with Vue.js frontend.
https://vlodkow.medium.com/your-first-near-smart-contract-with-vue-js-frontend-2e8f7ce3c036?source=rss------vuejs-5
What is NEAR?Continue reading on Medium »
https://vlodkow.medium.com/your-first-near-smart-contract-with-vue-js-frontend-2e8f7ce3c036?source=rss------vuejs-5
What is NEAR?Continue reading on Medium »
Vue 3 composition API in a nutshell
https://florian-kromer.medium.com/vue-3-composition-api-in-a-nutshell-8144244942c1?source=rss------vuejs-5
The differences and advantages in comparison to the options API.Continue reading on Medium »
https://florian-kromer.medium.com/vue-3-composition-api-in-a-nutshell-8144244942c1?source=rss------vuejs-5
The differences and advantages in comparison to the options API.Continue reading on Medium »
Integrate Vuetify Components from Everywhere
https://di-rk.medium.com/integrate-vuetify-components-from-everywhere-a882534f1f87?source=rss------vuejs-5
using VueJs 2.x & Vue CLI & VuetifyJs with WebpackContinue reading on Medium »
https://di-rk.medium.com/integrate-vuetify-components-from-everywhere-a882534f1f87?source=rss------vuejs-5
using VueJs 2.x & Vue CLI & VuetifyJs with WebpackContinue reading on Medium »
November Was All About Vue & Vue.JS in 2021
https://dev.to/meetupfeedio/november-was-all-about-vue-vuejs-in-2021-1go0
Are you looking for the most awesome Vue.js videos? Well, look no further, we deliver exactly what you need. Here are the best ones from November, and believe us, they are all worth checking out.
Continuous Delivery in VUE using GitLab Feature Flags | Kristian Muñoz
Jump into what continuous delivery and feature flags truly are. Let us guide you through different feature flag types, and the pros and cons of using them. All in all, learn how to reach continuous delivery in Vue, using Gitlab feature flags.
Create A Vue.js 3 Full Stack Application With Amplify, GraphQL, Auth and More | Erik Hanchett
Get ready for Erik Hanchett telling you all the details of how you can create a full stack application including AWS Amplify, Appsync, Lambda, Cognito for Authentication and Authorization and more!
Every New Vue Developer Has Made These Mistakes | Erik Hanchett
No one is perfect and there are mistakes that you can’t avoid at first, as a new developer. These certain mistakes are identified and explained by Erik Hanchett. How can you avoid these mistakes in the first place? He includes props, double brackets, how to use slots and the list goes on.
https://dev.to/meetupfeedio/november-was-all-about-vue-vuejs-in-2021-1go0
Are you looking for the most awesome Vue.js videos? Well, look no further, we deliver exactly what you need. Here are the best ones from November, and believe us, they are all worth checking out.
Continuous Delivery in VUE using GitLab Feature Flags | Kristian Muñoz
Jump into what continuous delivery and feature flags truly are. Let us guide you through different feature flag types, and the pros and cons of using them. All in all, learn how to reach continuous delivery in Vue, using Gitlab feature flags.
Create A Vue.js 3 Full Stack Application With Amplify, GraphQL, Auth and More | Erik Hanchett
Get ready for Erik Hanchett telling you all the details of how you can create a full stack application including AWS Amplify, Appsync, Lambda, Cognito for Authentication and Authorization and more!
Every New Vue Developer Has Made These Mistakes | Erik Hanchett
No one is perfect and there are mistakes that you can’t avoid at first, as a new developer. These certain mistakes are identified and explained by Erik Hanchett. How can you avoid these mistakes in the first place? He includes props, double brackets, how to use slots and the list goes on.
DEV Community
November Was All About Vue & Vue.JS in 2021
Are you looking for the most awesome Vue.js videos? Well, look no further, we deliver exactly what...
Time-Sampled Data Visualization with VueJS and GridDB | GridDB: Open Source Time Series Database…
https://medium.com/griddb/time-sampled-data-visualization-with-vuejs-and-griddb-griddb-open-source-time-series-database-c326c911026d?source=rss------vuejs-5
To improve a chart of time-series data we can let the user choose the time basis or “resolution” e.g. seconds, minutes, hours, etc.Continue reading on GridDB »
https://medium.com/griddb/time-sampled-data-visualization-with-vuejs-and-griddb-griddb-open-source-time-series-database-c326c911026d?source=rss------vuejs-5
To improve a chart of time-series data we can let the user choose the time basis or “resolution” e.g. seconds, minutes, hours, etc.Continue reading on GridDB »
Vue3 Composition vs Options API
https://sharmishtha-dhuri.medium.com/vue3-composition-vs-options-api-19aa0c11a749?source=rss------vuejs-5
Limitations of Options ApiContinue reading on Medium »
https://sharmishtha-dhuri.medium.com/vue3-composition-vs-options-api-19aa0c11a749?source=rss------vuejs-5
Limitations of Options ApiContinue reading on Medium »
Medium
Vue3 Composition vs Options API
Limitations of Options Api
Единая система диалоговых окон на vue-cli при помощи vuex и vue-router
https://habr.com/ru/post/593407/?utm_campaign=593407&utm_source=habrahabr&utm_medium=rss
Во vue я видел множество реализаций диалоговых окон и все они были слишком громоздкими и неудобными. И вот, в новом, начатом мной проекте я решил исправить данные проблемы.КонцепцияВся система будет работать довольно просто, для отображения нужного нам диалогового окна надо будет всего лишь изменить один query параметр в адресной строке браузера, для примера назовем этот параметр ‘dialog’. Соответственно для закрытия окна надо будет только убрать параметр ‘dialog’. Читать далее
https://habr.com/ru/post/593407/?utm_campaign=593407&utm_source=habrahabr&utm_medium=rss
Во vue я видел множество реализаций диалоговых окон и все они были слишком громоздкими и неудобными. И вот, в новом, начатом мной проекте я решил исправить данные проблемы.КонцепцияВся система будет работать довольно просто, для отображения нужного нам диалогового окна надо будет всего лишь изменить один query параметр в адресной строке браузера, для примера назовем этот параметр ‘dialog’. Соответственно для закрытия окна надо будет только убрать параметр ‘dialog’. Читать далее
Хабр
Единая система диалоговых окон на vue-cli при помощи vuex и vue-router
Во vue я видел множество реализаций диалоговых окон и все они были слишком громоздкими и неудобными. И вот, в новом, начатом мной проекте я решил исправить данные проблемы. Концепция Вся система...
#Vue
https://dev.to/rahulmishra117/vue-50ho
I want share a Data abc which is string in my one component to another component .Any Idea How to share that data.
https://dev.to/rahulmishra117/vue-50ho
I want share a Data abc which is string in my one component to another component .Any Idea How to share that data.
DEV Community
#Vue
I want share a Data abc which is string in my one component to another component .Any Idea How to...
Micro-Frontends with React&Vue
https://karatasebu.medium.com/micro-frontends-with-react-vue-50ea9c4bc5a2?source=rss------vuejs-5
Today we are making a trip future of the web applications. I will try to explain what is micro-frontends, how we can use React in Vue with…Continue reading on Medium »
https://karatasebu.medium.com/micro-frontends-with-react-vue-50ea9c4bc5a2?source=rss------vuejs-5
Today we are making a trip future of the web applications. I will try to explain what is micro-frontends, how we can use React in Vue with…Continue reading on Medium »
A chat app inspired by whatsapp
https://dev.to/readwarn/a-chat-app-inspired-by-whatsapp-3hc9
App link: Chat live-link
Repo link: Chat repo
Stack : MEVN
Hi guys, so yet again, I created a chat app, but this time, the app flow was inspired by WhatsApp.
Yea, this is the second chat-app project I've created, the first being a discord-like app. Here is article I wrote about it.
So this app basically let user sign up with just a unique username (no password needed). After signup, all new users are automatically added to the chat welcome channel. This channel is for new user to introduce themselves and interact with existing users.
Also the app has a DM feature, which allows users to chat privately. To initiate the private chat with a user, all you need to do is send them a friend request, as soon as they accept the request, you can start to chat with them.
I really don't want to explain how the whole app works or how to navigate through it. I just want to be sure the app is intuitive enough for user to understand and use.
I will also love to hear your feedbacks and feature suggestions. Thanks
PS: This app was created in less than a day [Vue.js sure makes everything simple].
Also I am really really open to a full time role/gig as a Vue.js dev. You can reach me on my email: [email protected]
https://dev.to/readwarn/a-chat-app-inspired-by-whatsapp-3hc9
App link: Chat live-link
Repo link: Chat repo
Stack : MEVN
Hi guys, so yet again, I created a chat app, but this time, the app flow was inspired by WhatsApp.
Yea, this is the second chat-app project I've created, the first being a discord-like app. Here is article I wrote about it.
So this app basically let user sign up with just a unique username (no password needed). After signup, all new users are automatically added to the chat welcome channel. This channel is for new user to introduce themselves and interact with existing users.
Also the app has a DM feature, which allows users to chat privately. To initiate the private chat with a user, all you need to do is send them a friend request, as soon as they accept the request, you can start to chat with them.
I really don't want to explain how the whole app works or how to navigate through it. I just want to be sure the app is intuitive enough for user to understand and use.
I will also love to hear your feedbacks and feature suggestions. Thanks
PS: This app was created in less than a day [Vue.js sure makes everything simple].
Also I am really really open to a full time role/gig as a Vue.js dev. You can reach me on my email: [email protected]
DEV Community
A chat app inspired by whatsapp
App link: Chat live-link Repo link: Chat repo Stack : MEVN Hi guys, so yet again, I created a...
Print PDF in electron
https://medium.com/@gakyoo/print-pdf-in-electron-61ff99efbce6?source=rss------vuejs-5
Hi developers, I have been trying to find a package to print in electron, but I ended up developing a simple PDF print class.Continue reading on Medium »
https://medium.com/@gakyoo/print-pdf-in-electron-61ff99efbce6?source=rss------vuejs-5
Hi developers, I have been trying to find a package to print in electron, but I ended up developing a simple PDF print class.Continue reading on Medium »
Vue 3 Teleport Kullanımı
https://medium.com/@serdargoleli/vue-3-teleport-kullan%C4%B1m%C4%B1-ca8e9bd93403?source=rss------vuejs-5
Vue 3 ile gelen bir diğer özelliğimiz ise teleport özelliğidir. Vue 3 geliştirme aşamasında ve beta sürümündeyken, teleport portal olarak…Continue reading on Medium »
https://medium.com/@serdargoleli/vue-3-teleport-kullan%C4%B1m%C4%B1-ca8e9bd93403?source=rss------vuejs-5
Vue 3 ile gelen bir diğer özelliğimiz ise teleport özelliğidir. Vue 3 geliştirme aşamasında ve beta sürümündeyken, teleport portal olarak…Continue reading on Medium »
Create a Data Flow Map using Cytoscape and Vue.js
https://yajanarao.medium.com/create-a-data-flow-map-using-cytoscape-and-vue-js-5be3b3ef11d2?source=rss------vuejs-5
We are going to create a Data Flow Map using Cytoscape and Dagre layout using Vue.jsContinue reading on Medium »
https://yajanarao.medium.com/create-a-data-flow-map-using-cytoscape-and-vue-js-5be3b3ef11d2?source=rss------vuejs-5
We are going to create a Data Flow Map using Cytoscape and Dagre layout using Vue.jsContinue reading on Medium »
Set up Nuxt3 with Jest & TypeScript
https://medium.com/@fgoessler/set-up-nuxt3-with-jest-typescript-80aa4d3cfabc?source=rss------vuejs-5
Today I want to walk you through the steps I took to set up my Nuxt3 project with Jest and TypeScript. I’ll start with a “TL;DR”.Continue reading on Medium »
https://medium.com/@fgoessler/set-up-nuxt3-with-jest-typescript-80aa4d3cfabc?source=rss------vuejs-5
Today I want to walk you through the steps I took to set up my Nuxt3 project with Jest and TypeScript. I’ll start with a “TL;DR”.Continue reading on Medium »
Build a News Aggregator App using Strapi and Nuxtjs
Ravgeet Dhillon
https://dev.to/ravgeetdhillon/build-a-news-aggregator-app-using-strapi-and-nuxtjsravgeet-dhillon-1n52
If you are an avid reader, you might have a News Aggregator app installed on your device. Wouldn't it be awesome to create your own News Aggregator app that you can control and customize according to your needs?
This tutorial aims to learn about Strapi and Nuxt.js by building a News Aggregator app with Strapi and Nuxt.js. In this app, you'll:
Learn to set up Strapi Collection types
Learn to set up Frontend app using Nuxt.js
Use CRON jobs to fetch news items automatically
Add Search capabilities
Register subscribers
Read the full blog on Strapi.
Thanks for reading 💜
I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I 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
Ravgeet Dhillon
https://dev.to/ravgeetdhillon/build-a-news-aggregator-app-using-strapi-and-nuxtjsravgeet-dhillon-1n52
If you are an avid reader, you might have a News Aggregator app installed on your device. Wouldn't it be awesome to create your own News Aggregator app that you can control and customize according to your needs?
This tutorial aims to learn about Strapi and Nuxt.js by building a News Aggregator app with Strapi and Nuxt.js. In this app, you'll:
Learn to set up Strapi Collection types
Learn to set up Frontend app using Nuxt.js
Use CRON jobs to fetch news items automatically
Add Search capabilities
Register subscribers
Read the full blog on Strapi.
Thanks for reading 💜
I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I 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
Build a News Aggregator App using Strapi and Nuxtjs
If you are an avid reader, you might have a News Aggregator app installed on your device. Wouldn't it...
Is anyone building microfrontends with different UI libraries?
https://dev.to/keonik/is-anyone-building-microfrontends-with-different-ui-libraries-3iee
I have a scenario where a subset of developers enjoy building with Vue and another subset of devs enjoy React. I’m curious to know if anyone is leveraging the micro front end design pattern with different frameworks/libraries.
https://dev.to/keonik/is-anyone-building-microfrontends-with-different-ui-libraries-3iee
I have a scenario where a subset of developers enjoy building with Vue and another subset of devs enjoy React. I’m curious to know if anyone is leveraging the micro front end design pattern with different frameworks/libraries.
DEV Community
Is anyone building microfrontends with different UI libraries?
I have a scenario where a subset of developers enjoy building with Vue and another subset of devs...
Tailwind for Vue 3 (vite)
https://medium.com/geekculture/tailwind-for-vue-3-vite-382c3d34ec0a?source=rss------vuejs-5
INTRODUCTIONContinue reading on Geek Culture »
https://medium.com/geekculture/tailwind-for-vue-3-vite-382c3d34ec0a?source=rss------vuejs-5
INTRODUCTIONContinue reading on Geek Culture »