daniel, Another stream - I fell into a trap 🚨 and will be building/discussing a #vuejs integration for https://www.convex.dev with @ballingt today ...
▶️ Streaming now on https://twitch.tv/danielroe
kalvn, French Les avantages de Vue par rapport à React, vus par un développeur React (cette phrase est bizarre 🤔).
Things that I like better in Vue than in React
https://jaydevm.hashnode.dev/things-that-i-like-better-in-vue-than-in-react
iamdtms,
mirkobrombin,
gabs, @mirkobrombin The dark mode is just 🤌
mirkobrombin,
joe, This past autumn, I started playing around with the Composition API, and at the October 2023 Hack and Tell, I put that knowledge into writing a “Job Tracker“. The job tracker used Vuex and Firebase Authentication to log a user in using their Google credentials. With
const store = useStore()
on your view, you can do something likeWelcome, {{user.data.displayName}}
but using this technique you can also use …
const LoginWithGoogle = async () => {<br></br>try {<br></br>await store.dispatch('loginWithGoogle')<br></br>router.push('/')<br></br>}<br></br>catch (err) {<br></br>error.value = err.message<br></br>}<br></br>}
… to kick off the authentication of the user. I want to use it to finally finish the State Parks app but I also want to use Pinia instead of Vuex, I wanted the resulting app to be a PWA, and I wanted to allow the user to log in with more than just Google credentials. So, this past week, I wrote my “Offline Vue Boilerplate“. It is meant to be a starting point for the State Parks app and a few other apps that I have kicking around in my head. I figured that this week, we should go over what I wrote.
Overview
The whole point of this “boilerplate” application was for it to be a common starting point for other applications that use Firebase for authentication and a NoSQL database. It uses:
- Vue.js
- Pinia
- The Composition API
- Bulma
- The vite-plugin-PWA plugin
- Font Awesome (I’m putting that pro account to use)
- Crypto-JS (It was needed for Gravatar)
- Firebase Authentication (So you can log in using Google or Microsoft credentials)
- Firebase Cloud Firestore (Much easier to work with than Firebase Realtime Database)
- Vite
I was using a lot of this stack for work projects, also. It is nice because Firebase is cheap and robust and you don’t need to write any server-side code. Hosting of the front-end code is “cheap-as-chips”, also. The Job Tracker is hosted using Firebase Hosting (which is free on the spark plan) and The Boilerplate App is hosted using Render, which is just as free.
Authentication
I am most proud of how I handled authentication with this app. Here is what the Pinia store looks like:
From your view, you can access
{{ user }}
to get to the values that came out of the single sign-on (SSO) provider (the user’s name, email address, picture, etc). For this app, I used Google and Microsoft but Firebase Authentication offers a lot of options beyond those two.Adding Google is pretty easy (after all, Firebase is owned by Google) but adding Microsoft was more difficult. To get keys from Microsoft, you need to register your application with the Microsoft identity platform. Unfortunately, the account that you use for that must be an Azure account with at least a Cloud Application Administrator privileges and it can not be a personal account. The account must be associated with an Entra tenant. This means that you need to spin up an Entra tenant to register the application and get the keys.
The third SSO provider that I was tempted to add was Apple but to do that, you need to enroll in the Apple Developer program, which is not cheap.
Firebase Cloud Firestore
I have become a big fan of Firebase Cloud Firestore over the years (at least for situations where a NoSQL database makes sense). The paradigm that I started playing around with last year involved putting the Firebase CRUD functions in the composable.
Here is an example
<script>
block from the Job Tracker:The author of the view doesn’t even need to know that Firebase Cloud Firestore is part of the stack. You might wonder how security is handled.
Here is what the security rule looks like behind the job tracker:
The rule is structured so that any authenticated user can create a new record but users can only read, delete, or update if they created the record.
How I made it into a Progressive Web App (PWA)
This is the easiest bit of the whole process. You just need to add
vite-plugin-pwa
to the dev dependencies and let it build your manifest. You do need to supply icons for it to use but that’s easy enough.The Next Steps
I am going to be using this as a stepping-stone to build 2-3 apps but you can look forward to a few deep-dive posts on the stack, also.
Have any questions, comments, etc? Please feel free to drop a comment, below.
[ Cover photo by Barn Images on Unsplash ]
https://jws.news/2024/wrote-a-thing-with-vue-and-firebase/
#CompositionAPI #Firebase #pinia #StateParksApp #VueJs #vuex
Akryum, Release #vuejs devtools 6.6 with a refreshed UI!
rauschma, “Evan You, creator of Vue.js, learned a few hard lessons in the transition from version 2 to version 3 of the progressive JavaScript framework for building user interfaces […]”
Interesting insights into how to best evolve frameworks and libraries.
https://thenewstack.io/what-vues-creator-learned-the-hard-way-with-vue-3/
scy,
scy, @quincy No. I can’t give any more context to protect the innocent, but the template is full of this stuff. Apparently someone saw {{ foo }} somewhere, but needed to render a static string instead of a variable’s contents, and instead of removing the braces altogether, replaced the variable with a string literal.
It’s been copy-pasted everywhere. 😔
akrennmair, @scy there's always this classic meme...
YurkshireLad, I hate websites that use new fangled frameworks, and as soon as you load their home page, they prompt you with "a new version is available, do you want to load it?". No! Why aren't you automatically giving me the latest version? I know, I know, It's probably a caching thing. But what a ridiculous thing to ask a user.
partizan, I'm trying to use generic type with vue composition API, and getting an error.
import { ref } from "vue"; function useContext<T extends BaseContext>(v: T) { const context = ref<T | null>(null) context.value = v return {context} } interface BaseContext {}
src/main.ts:5:3 - error TS2322: Type 'T' is not assignable to type 'UnwrapRef<T> | null'.
Is this a bug, or am i doing something wrong?
kkarhan,
partizan, Ukrainian @kkarhan let me check...
print("hello")
Markdown should work with three ` whatever is this called. But mastodon uses client-side markdown render, so it works only in some clients (like Elk).
thomastospace, Recently I started on a #Vuejs project at my new job. I've only worked with #Angular before.
One thing I didn't like it first, turned out to be an unexpected strength. In Angular, each component has a separate template, typescript & sass file. In Vue.js this is all inside a single file! Ugly and hard to use I thought.
Instead, it's a blessing. When a component reaches 100-150 lines, it already feels like a large component. Any larger? Time to split it up. It helps keep code clean.
pierstoval, French @thomastospace benchmarks will matter for identical applications, especially big ones. Here, the runtime performances are less than 10% of others, so we can say that it's insignificant and even the doomed virtual DOM of react and Vue don't cause too much overhead.
However, I wish we could have a more complex application with processed CSS (like tailwind) to have more accurate comparisons, but it needs more thinking and I already spent too much time on these benches 😅
pierstoval, French @thomastospace the conclusion to my benchmarks so far isn't about runtime performance but rather build time, size, and amount of dependencies, and in this case, Svelte has a pretty high score.
Last check which isn't shown here is the code complexity for the same features, and IMO svelte wins again. Setup is quick, and understanding of base features of the framework are straightforward, which isn't the case for Vue and React.
feudjais, French Des bons tutos gratuits sur #Vuejs (version 2) à recommander ? :)
Merci par avance !
zyklop, I need a simple #backend for a simple web app (technically on the same level like a todo app).
I know everything about #Frontend #vue #Angular #TypeScript #WebDevelopment but nothing about databases.
What database/language/framework should i take for the backend?
takishan, @zyklop easiest to set up imo is nodejs + express + postgres
If you're just making a simple application you may not need to set up a SQL database tho. I have a web app for some employees at my company and I just have nodejs update a csv file with values. Yeah it's not pretty but if it works..
zyklop, Thanks!
Actually I like your second idea here..
I worked with a php cms for decades which stored all content that was editable through the admin-login simply into markdown files (@getkirby) . No other dependencies than php. No database at all. That definitely has its upsides.So then it would be #angular frontend, #nodejs backend, probably with some lib that makes it easier to customize the file(s).
joe,
joe,
cooptilleuls, French Refonte totale, performances accrues, UX optimisée... #VueJS laisse derrière lui sa version 2, qui ne sera plus maintenue à la fin du mois. Voyons ensemble comment nous pouvons vous aider dans votre migration vers la version 3 ! https://les-tilleuls.coop/blog/vue-js-migration
box464, Stuck on a single concept in #VueJS that just isn't clicking in my head this weekend. Emits, which seems fairly important! Frustrating, but I'll get through it. Maybe some sleep will help.
leanpub, The Majesty of Vue.js 2 by Alex Kyriakidis and Evan You is on sale on Leanpub! Its suggested price is $31.90; get it for $17.43 with this coupon: https://leanpub.com/sh/elUtWk4P #Vuejs #Javascript #Es6 #Html
leanpub, Practical Vue 3: Discover the power of the new Vue 3 https://leanpub.com/book-vue-3 by Daniel Schmitz is the featured book on the Leanpub homepage! https://leanpub.com #VueJS
mirkobrombin, The Toolkit for Bottles Next is at the beginning of its work, and this is how it currently looks without the Bottles color scheme.
https://github.com/mirkobrombin/vnt
For the "is Bottles leaving GTK?!" topic, please have a read: https://usebottles.com/blog/bottles-next-a-new-chapter/
iamdtms,
sebastix, Finishing up the redesign of the navigation on my site I worked out a week ago.
cooptilleuls, French 🔔 La fin de vie de la version 2 de #VueJS est prévue le 31 décembre 2023. Découvrez sur notre blog comment nous pouvons vous accompagner dans votre montée de version et ainsi, protéger votre applicatif de potentielles failles de sécurité. https://les-tilleuls.coop/blog/vue-js-migration
cjerrington,