Dynamic Routing Load a chat room based on its document ID with the Vue Router This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below. *Enrollment provides full access to this course (and updates) for life. Or Signup for Unlimited PRO Access 📼 Login to Watch 👈 Query Chat Rooms Query Messages 👉 Router Config file_type_js_official main.js import ChatRoom from './components/ChatRoom' const router = new VueRouter({ routes: [ { path: '/chats/:id', component: ChatRoom, name: 'chat' } ] }) Router Link <router-link :to="{ name: 'chat', params: { id: chat.id } }">{{ chat.id }}</router-link> ChatRoom Component ChatRoom.vue <template> <main class="section"> <h3>Welcome to ChatRoom.vue {{ chatId }}</h3> <router-link to="/">Back</router-link> </main> </template> <script> export default { computed: { chatId() { return this.$route.params.id; }, }, }; </script> Chapters Get Started 📜 1 Resources Project source code and Vue Firebase resources 1:44 ⚡ 2 Vue Setup Get started with the Vue CLI free 3:43 🔥 3 Firebase Setup Install Firebase and the Vuefire package 3:25 🚆 4 Your First Component Build a basic home page component with routing free 2:13 User Authentication 👤 5 Anonymous Auth Basic user authentication with Firebase 2:02 👥 6 Realtime Auth State React to changes to the Firebase User Auth State free 4:02 👋 7 User Profile Create a user profile where the user can sign out 1:51 📧 8 Email Password Authentication Bind to forms in Vue to sign up with email & password 6:02 Firestore Chat 💬 9 Create Chat Rooms Create a chat room in Firestore linked to the current user 2:50 🔍 10 Query Chat Rooms Query all chat rooms owned by the current user 1:48 🚉 11 Dynamic Routing Load a chat room based on its document ID with the Vue Router 2:14 📩 12 Query Messages Query most recent messages in a subcollection of the chat room 3:48 🎀 13 Message UI Build a UI component for showing the message text 2:32 Voice Messages 🎙️ 14 Capture Audio Record a stream from the user's microphone using the MediaRecorder API 3:19 📤 15 Upload Upload the audio file to Firebase Storage and link it to a Firestore document 3:33 🍰 16 Wrap up Final thoughts and ideas to improve the quality of the app. 1:51