Vue JS Essentials with Vuex and Vue Router

Build a YouTube browsing app using YouTube API; search, a video list on the right, and a left pane that plays videos with descriptions, while comparing Vue.js and React approaches.

Explore four big app challenges for the YouTube-style Vue app: search YouTube API results, build multi-component layouts, bootstrap with Vue CLI, and handle user input with directives and computed properties.

Install Vue CLI in your terminal, generate a new Vue project with the vue create command, and accept default options like babel and eslint to quickly bootstrap a project.

Understand how the Vue CLI streamlines project setup by automatically configuring Webpack and Babel, enabling multi-file apps and seamless browser compatibility.

Run npm run serve to start the development server that bundles files with webpack and babel via ucli; then open localhost:8080 and explore public and src, including main.js and app.vue.

Discover how Vue files encapsulate one component per file, with template, script, and style sections inside App.vue, containing html, javascript, and css for easier access to related code.

Explore behind the scenes of Vue files, and how Babel and Webpack convert template, script, and style into browser-ready JavaScript.

Differentiate view components as blueprints from their DOM-bound view instances. Explain how the app component coordinates search bar, video list, video list item, and video detail under main.js bootstrapping.

Start a Vue app from scratch by deleting the src directory, recreating main.js and App.vue, and building a single root component with template and export default.

Explore the app component as the brains of a Vue app, using export default, a name property, and template placement to coordinate data, computed properties, and methods.

Import App.vue into main.js and render it using a render function with createElement (h), then refactor to an ES2015 arrow function to display the app.

Explore mounting a Vue app via main.js, render an app component to the DOM, and compare the $mount and L approaches using the div with id app.

Develop the search bar component in a Vue.js app to capture input and trigger a YouTube API search, scaffolding a dedicated view file with template, script, and style sections.

Wire the search bar component into the app by importing it, placing a search bar tag in the template, and adding it to the app's components object so it renders.

Wire an input event to a Vue component using a v-on directive, define an onInput method to log the user text, and prepare to search the YouTube API.

Refactor the input directive to use the shorthand @ syntax for v-on, making event handling more readable while maintaining the same behavior; adopt one style per project for consistency.

Place the search logic in the app component to manage the video list from the YouTube API and share data with the video detail and video list.

Explore how a search bar communicates with the app in Vue using props for downward data and events for upward input, enabling a YouTube API search flow.

Learn how to emit events in Vue components, using a search bar to emit a term change event with the updated input value to trigger a YouTube API search.

Learn how the app listens for the search bar's term change event, handles it with on term change, logs the term, and prepares for a YouTube API search.

Sign up for the YouTube data API v3, create a project, enable APIs, and obtain an API key; then use Axios to fetch public videos via search.

Learn to search YouTube videos via the YouTube Data API with Axios in a Vue app, configuring key, type, part, and query.

Fix the url typo by adding www to the YouTube API address, then inspect the ajax response, status 200, data items, and snippet details for display in a Vue app.

Create a Vue video list component and a video list item to render YouTube API search results as a list, then wire it into the app.

Fetches videos from the YouTube API on term change and passes the list from the app component to the video list, with data updates triggering rerenders that refresh the display.

Define data as an object for Vue instances, but as a function returning an object for Vue components, ensuring each component has its own copy and avoids shared state.

update the component's data by returning an object from a data function, initialize videos as an array, and refresh the template automatically when the YouTube API response returns new items.

Learn how to pass data from a Vue.js parent to a child using props and the v-bind directive, enabling automatic re-rendering of the video list when the parent data updates.

Define a child prop named videos to receive the parent's video list, with optional validation to enforce an array or object mapping, and display its length in the template.

Divide the video list into two components—video list and video list item—pass the videos prop, render a list item for each video, and register the child component for use.

Leverage the v-for directive to render a dynamic video list in Vue, creating five video list item components from YouTube API results.

Explore rendering a video list with v-for in Vue, pass data from the parent to video list item using v-bind props, and display each video’s title from video.snippet.title.

Render video lists with the v-for directive using the colon shorthand and apply a unique key, such as the video e-tag, to optimize list rendering in Vue.

Install and apply bootstrap styling to the project, include the bootstrap css link in index.html, and style the video list to resemble the mockup with thumbnails and titles.

Learn to style a search bar to span a large portion of the screen and center it using Bootstrap's container and scoped css in Vue components.

Style the video list with bootstrap's list group to create a bordered, divided layout for thumbnails and titles by applying list-group to the ul and list-group-item to the list items.

Display a thumbnail beside each video title using the YouTube API's snippet thumbnails default URL. Bind this URL to an image tag in the video list item template with v-bind.

Learn how to use a computed property to create a thumbnail URL from a prop and reference it in the template, keeping code clean and maintainable.

Style a Vue video list item with bootstrap media classes and scoped CSS to align thumbnails with titles, add hover effects, and enable clickable video selection.

Explore handling nested clicks in a Vue app by emitting custom events from video list items and bubbling up to update the video detail via the app.

Explore how clicking a video list item emits a video select event, which is listened to by the video list and emitted to update the app’s video detail component.

Listen for a video select event from the video list, handle it in the app component, and pass the selected video object (with snippet) to a new video detail view.

Learn to pass the selected video from the app to the video detail component using props and v-bind in Vue, with setup of the parent and child components.

Update the app data by storing the selected video in a new property, propagate it via a prop to the video detail, and handle initial null before a selection.

Use the v-if directive to guard the video prop until it loads, preventing cannot read property snippet of null errors in Vue.

Display the video title and description from the video snippet property in the YouTube API response, wrapped in a details box styled with scoped CSS for presentation.

Learn to embed a YouTube video in a Vue app by building a dynamic iframe src from the video ID using a computed url.

Apply Bootstrap responsive embeds to resize a YouTube iframe, wrapping it in an embed-responsive container and using embed-responsive-16by9 and embed-responsive-item classes for a fluid video across screen sizes.

Build a responsive two-column layout in Vue.js with Bootstrap by wrapping the video detail and video list in a row and applying col-md-8 and col-md-4 classes.

Explore how to communicate data between Vue components using props from parent to child and events from child to parent, focusing on parent, child, and sibling interactions.

Add a click event handler to a button by defining a logPi method on a Vue view instance and binding it to click event so it logs Math.PI to console.

Create a counting component with a data property count initialized to zero, and increment and decrement methods bound to plus and minus buttons to display the current count.

Generate a new Vue project with the Vue CLI, review mockups for a private user gallery featuring login, drag-and-drop image uploads, and a gallery of user uploads.

Navigate app screens with Vue Router and manage data flow with Vuex. Enable image uploads to Imgur via OAuth, requiring login to view and upload only user images.

Install essential dependencies in the images directory, including axios, lodash, queues (query string), Vue Router, and Vue, to support OAuth authentication and further development.

Set up a Vue app from scratch by removing boilerplate, creating main.js and app.vue, building a root component, and rendering it to the #app div on localhost:8080.

Create the header component for the Vue app, featuring a left logo, a right login/logout button that toggles by authentication, and links to the gallery and upload pages.

Install Semantic UI by including its CSS file via a CDN and add the link tag to the index.html to apply consistent styling across the app.

Style the app header with semantic ui by building a left logo button and right-aligned actions using a ui secondary pointing menu and active item anchors.

Explore how authentication and image upload work with Imgur, focusing on using the Imgur API for the app header's login, sign-in status, and gallery upload options.

Explore how the Imgur OAuth flow authenticates users in a Vue app, using a login button to redirect to the provider, grant access, and return a token for image uploads.

Register for the Imgur API, obtain a client ID and client secret, and implement an oauth2 flow with a callback URL to enable developer access and image uploads.

learn how to place authentication logic for the imgur oauth flow, manage the token and auth state across app header, image list, and upload form, using a central library.

Explore how Vuex enables scalable state management by organizing data into an auth module and an images module, and manage the flow of data and storage outside of components.

Explore the four parts of a Vuex module: state, getters, mutations, and actions, through a practical car inventory example, illustrating how each part manages and updates data.

Create and connect a Vuex store to the Vue instance, organize modules in a store folder, and plan an auth module with state, getters, actions, and mutations.

Design an auth module in Vuex by creating Auth.js, manage a token in state (initially null) via OAuth, and expose isLoggedIn to reflect login status.

Design a Vuex auth module with a set token mutation and actions for login, finalize login, and logout, handling the token from the Imgur OAuth url.

Define the Vuex auth module with state, getters, actions, and mutations; initialize token to null and implement is logged in as a boolean based on token.

Define a set token mutation to update the state's token value using the second argument provided by actions like finalized login or log out, keeping mutations simple.

Learn how to implement a log out action in Vuex by using commit to call the set token mutation and reset the token to null.

Explore implementing login with the Imgur OAuth flow in a Vuex and Vue Router app, including token handling and the idea of a shared Imgur API helpers module.

Create an API helper for the imgur oauth login flow, form the OAuth URL with a client id and root URL using a query string library, then redirect via window.location.

Define a login action in the auth module that calls the API login function to start the OAuth login flow, knowing the browser will navigate away.

Wire the auth module to the application by exporting state, getters, actions, and mutations, then register the module in the store and connect it to the view instance.

Connect the auth module to the app header by mapping the login action with Vuex, trigger the initial OAuth request, and handle the access token returned in the URL.

Extract the access token from the OAuth 2 callback URL using window.location.hash, then route to an auth handler and trigger the auth module to store the token.

Learn to set up Vue Router in main.js, define the oauth2/callback route, and render the auth handler that extracts the token from the URL.

switch from hash router to browser router in vue, enabling history mode, removing the hash from the url, and preparing to extract the access token from the oauth callback.

Insert a router-view tag into App.vue so Vue Router places matched components at that location, enabling route rendering such as the auth handler for oauth2/callback and its please wait display.

Extract the access token from the OAuth2 callback URL and trigger the finalized login action in the auth module as the auth handler component mounts, using Vue lifecycle methods.

wire up the finalize login action to the auth handler using mapActions, invoke it in a created lifecycle hook, and pass window.location.hash to parse the access token during OAuth.

Parse the access token from the OAuth redirect hash, convert it with a query string module, and call the set token mutation in the finalized login action to update state.

Learn to expose the Vuex auth module’s is_logged_in getter with mapGetters as a computed property in the app header, enabling the header to reflect whether the user is signed in.

Leverage v-if and v-else to conditionally render header buttons based on the is logged in state, switching between log in and authenticated actions like galleries, upload, and log out.

Learn how to persist user authentication in a Vuex-based app by storing and retrieving an access token from local storage to maintain login state across page refreshes.

Replace header buttons with anchor tags and apply a horizontal flex layout to display galleries, upload, and log out side by side, using a v-if directive and scoped CSS.

Wire the logout action to the header button; clicking logs out by clearing the token and switches the header to the not logged in state with a login button.

Learn how actions update auth state in Vuex and trigger automatic component updates, so headers reflect login status without manual rerendering.

Clear the imgur_token from localStorage during logout to fully sign out. Redirect away from the OAuth2 please wait page after login to avoid staying on it.

Learn how to use Vue Router for programmatic navigation after OAuth authentication, redirecting users to the root route without page reloads and displaying the image list.

Create two new Vue components for the gallery and upload form, import them into the router, and define routes for root and /upload to enable navigation.

Learn to enable seamless in-page navigation in a Vue app by replacing anchor tags with router-link, routing to galleries and upload, and avoiding full page reloads.

Design a Vuex image module to fetch and upload images from the Imgur API, with images array state, all images getter, and fetch and upload actions, using set images mutation.

Define the images module in Vuex by creating images.js with state, getters, mutations, actions, including an empty images array, a getter for all images, and a set images mutation.

Learn to fetch a user's images from the Imgur API by implementing the fetch images action in the images module and using the account/me/images endpoint with an authorization bearer token.

Create a fetch images function with Axios to call the imgur API, sending a bearer authorization header and wiring the access token from auth to the images module.

Export the images module in Vuex, including state, getters, actions, and mutations, map the fetch images action to the image list component, and fetch images from the Imgur API.

Upload an image to Imgur using the same OAuth account, verify the upload by inspecting the API response, then fetch and commit the image data to update the app state.

Fetch images from the imgur API, commit set images to the Vuex images module, and map getters in the image list component to render them.

Map the all images getter from the images module into the image list component using mapGetters, exposing the images via a computed property and printing their count in the template.

List images by looping over fetched images with v-for, bind each source to image.link, and render an image tag, while planning to implement the upload form later.

Explore how to implement image upload in the vue app using a drag-and-drop or click-to-select interface, posting an image to the imgur API and handling multiple uploads as separate requests.

Build a drag-and-drop upload form with HTML and CSS. Create a blue dropper div with a dashed border, rounded corners, and a hidden file input paired with a span label.

Wrap the router-view in a div with a UI container in app.vue to add margins, center dropper with flexbox, and make the file input fill and remain invisible yet clickable.

Define an upload images action in the image module and wire it to the component with mapActions, ready to upload files to the imgur API via the input element.

Bind a change event to the file input to trigger the upload images action. Capture the event object and use event.target.files to access the file list for the Imgur API.

Learn to pass only the file list to the upload images action by using event.target.files, enable multiple image selection, and restrict inputs to image files.

Upload images to the Imgur API by obtaining the access token from the auth module, invoking the API module to upload, and redirecting to the image list view on success.

Learn to implement concurrent uploads with a single promise using Promise.all, uploading multiple images in parallel, then navigate to the image list component via the router.

Create a three-column image grid with CSS grid, using an image container and images with max-width 100% and five-pixel padding for a neatly spaced gallery.

Render the image list only if the user is logged in via the auth module’s is_logged_in getter and a v-if; show log in to get started when not logged in.