Courses for Front-End Web Developers

Turborepo is a fast build system for JavaScript and TypeScript.

turborepo

Now you might have a project that currently isn't in your Monorepo that you want to add to it. We can copy that project over into our `apps` folder and then update the `package.json` to update the name to make it consistent across our apps. We'll update the dev port to make sure it's not going to run on the same port as one of our other applications. Lastly, we'll update the build pipeline to include our new application. 

Migrate a VueJS Application to an Existing Turborepo Monorepo

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In this lesson, you will learn how to conditionally render images in Vue.js using the `v-if` directive. We will look at defining data properties that will control whether an image is rendered or not and how to use the `v-if` directive

Conditionally Render Images in Vue.js using the v-if Directive

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



Jonathan Bakebwa introduces MDX support for VueJS and NuxtJS while also using Chakra UI Vue for MDX components

MDX and VueJS/NuxtJS

Now that we covered fundamentals, we're going to design and implement common components that you will see in the wild. 

We'll start with a basic Vue.js application and some hard-coded data that will be displayed within the application.


Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Design and Implement Common Tailwind Components

Creating cross-platform web-based applications with Ionic 4 and Vue is easy thanks to the Stencil compiler and the Vue.js CLI.

We look at how to combine these together to use Ionic 4 components within our Vue.js applications.

Create an Ionic 4 application with Vue.js

In this lesson I show how to use webpack to code split a modal component in VueJS. Code splitting is a useful tool to help eliminate unused code and only load what's necessary.

**Additional Resources**
https://vuejs.org/v2/guide/components-dynamic-async.html
https://medium.com/js-dojo/3-code-splitting-patterns-for-vuejs-and-webpack-b8fff1ea0ba4

Code split a modal component in VueJS

In this lesson I show how to use webpack to code split based on route in VueJS. Code splitting is a useful tool to help eliminate unused code and only load what's necessary.

*Additional Resources*
https://router.vuejs.org/en/advanced/lazy-loading.html


Code split by route in VueJS

URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

Load Data from URL Params in Vue.js and Nuxt.js

As you create more and more routes, the paths become difficult to manage and concatenate the parts together as just a giant string. Using named routes allows you to reference the route by a simple string then pass in the params as an object. This lesson covers configuring named routes in Nuxt.js in the `nuxt.config.js` and the passing the named route to a `router-link`.

Configure Named Routes in Vue.js and Nuxt.js

Sometimes the `pages/` directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Nuxt.js allows you to return a `Promise` from your `data` function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.

Preload Data using Promises with Vue.js and Nuxt.js

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own `app.vue` layout in a `layouts` directory. Then you simply surround your content (the `<nuxt>` instance) with your navigation and/or layout and you're ready to go.

Create Vue.js Layout and Navigation with Nuxt.js

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a matter of minutes.

Build Vue.js Apps with the Vue-CLI and Nuxt.js

**Get started building dynamic apps with GraphQL and Vue3.**

As your app scales, so does the complexity of managing your routes and API endpoints. 

It gets tiresome. 

But this aspect of web development can be streamlined considerably! 

GraphQL is a powerful tool for querying and mutating your data. In this course, we are going to create a Vue3 app that leverages GraphQL to create a dynamic front end.

But what does GraphQL *do*? 

Its power comes from giving you a *single* endpoint that you make all your queries to. Instead of making a request to a specific endpoint and getting a fixed response, you can write flexible queries to a single endpoint.

![REST vs GraphQL diagram](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1638989029/course-resources/create-a-graphql-powered-vue-3-application/rest_vs_graphql.png)

Vue3 has some great new features that we will be exploring, such as the setup script syntax. But you won't just be exploring Vue3's new features, we will be building a dynamic front end with an index, view pages generated from data, and forms.

To make our frontend dynamic, we will be powering it with GraphQL. We start with the basics by creating queries but we move on to more advanced topics such as query params, mutations, and pagination.

To actually use GraphQL in our Vue app we will be using the Vue Apollo Client. Which gives us convenient methods for making queries, getting the data back into the client, and handling errors.

## Gain These Skills

- Add GraphQL to a Vue 3 project
- Query and mutate data with GraphQL in Vue 3
- Create data-driven views with Apollo client
- Handle routing within a Vue 3 project
- Implement optimistic updates and infinite scroll

## Prerequisites

Some entry-level knowledge on Vue and GraphQL is recommended, but this course is beginner-friendly enough to where it isn't a strict requirement.

If you want to build a deeper foundation for both Vue and GraphQL we have a couple of awesome courses that you can hack through. 

For Vue, check out **[The Beginner's Guide to Vue 3](https://egghead.io/courses/the-beginner-s-guide-to-vue-3-1c46da8b),** which is also by Kevin. It's great for both newcomers to web dev and veterans alike. 

And for GraphQL, work through **[GraphQL Query Language](https://egghead.io/courses/graphql-query-language)** from Eve Porcello. Eve literally wrote the book on learning GraphQL and her course is similarly top quality. 

## What's Next?

Progressive Web Apps are a more advanced topic, and converting an existing Single Page **Vue** App into one makes for an excellent follow-up project. **->** [Offline-First Progressive Web Apps (PWA) in Vue.js](https://egghead.io/courses/offline-first-progressive-web-apps-pwa-in-vue-js)

If you want to take your **GraphQL** game to the next level, then becoming an expert in designing GraphQL schemas is the way to go. **->** [Designing GraphQL Schemas](https://egghead.io/courses/designing-graphql-schemas-99db)

And I know the following recommendation is a React course but *it really is that good*. You will learn some **advanced** techniques that will be applicable to Vue or any other Apollo compatible framework that you work with. **->** [Manage State in React Apps with Apollo Client and GraphQL](https://egghead.io/courses/manage-state-in-react-apps-with-apollo-client-and-graphql-a45b3b89)

Create a GraphQL Powered Vue 3 Application

<p>John Lindquist interviews Sarah Drasner, a senior cloud developer over at Microsoft and a Vue core team member. She is also known for making super cool animations. Today they discuss what got her from an art background to a full-time developer, resistance to change, why Vue is terrific, and the GreenSock animation platform (GSAP).</p><p>Sarah's background was very unusual for a developer. She graduated with a major in printmaking and became a scientific illustrator for a nature museum. She relates drawing to program in that it's just a series of formalized steps. Many people say they can't draw, but if they just opened up and learned the process they would become technically proficient in drawing!</p><p>Sarah also talks about how awesome GSAP is. Through benchmarking, she found that GSAP performed even better than native technologies when working with SVGs. She then gets into MorphSVG, and how it lets you transition between two SVGs and all sorts of things to create transitions.</p><p>Finally, she discusses how she stays motivated on all the many projects she works on. She likes to imagine the feeling she'll get when she finally finishes it and lets that drive her. She also uses positive rewards for little milestones, such as eating a treat she enjoys or sitting in her favorite chair and relaxing.</p><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/e1ffe803/transcript">"Sarah Drasner talks about SVG animation with Greensock and Vue.js" Transcript</a></p><h3>Resources</h3><ul><li><a href="https://egghead.io/courses/develop-basic-web-apps-with-vue-js">egghead: Develop Basic Web Apps with Vue.js</a></li><li><a href="https://css-tricks.com/intro-to-vue-1-rendering-directives-events/">CSS Tricks: Intro to Vue</a></li><li><a href="https://greensock.com/">Greensock</a></li></ul><h3>Sarah Drasner</h3><ul><li><a href="https://sarahdrasnerdesign.com/">Website</a></li><li><a href="https://twitter.com/sarah_edo">Twitter</a></li><li><a href="https://github.com/sdras">Github</a></li><li><a href="https://egghead.io/instructors/sarah-drasner">egghead</a></li></ul><h3>John Lindquist</h3><ul><li><a href="https://twitter.com/johnlindquist?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Twitter</a></li><li><a href="https://egghead.io/instructors/john-lindquist">egghead.io</a></li><li><a href="https://github.com/johnlindquist">Github</a></li><li><a href="https://johnlindquist.com/">Website</a></li></ul>

John Lindquist interviews Sarah Drasner, a senior cloud developer over at Microsoft and a Vue core team member. She is also known for making super cool animations. Today they discuss what got her from an art background to a full-time developer, resistance to change, why Vue is terrific, and the GreenSock animation platform (GSAP). 

Sarah Drasner talks about SVG animation with Greensock and Vue.js

<p>John Lindquist asks Evan You when exactly did he become a developer? Evan talks about how the whole thing was a gradual process with no definite "I'm a developer now!" moment. Evan had a degree in art and art history, but he was finding it hard to find work. So Evan went back to school and enrolled in a design and technology program where everyone was forced to learn to code, this is where he first learned Javascript and found great enjoyment in using it.</p><p>Google's Chrome experiments are what drove Evan to learn Javascript on a deeper level. Evan landed a job at Google Creative Labs after he created and put a portfolio of his prototypes out there once he thought himself to be good at programming. Google Creative Labs were looking for someone who could bring in design and build cool things quickly, they contacted Evan, and things sort of just fell together.</p><p>Google Creative Labs was where Evan first started his work on Vue. As the project grew, the team started to use Angular 1. it had too many features that they didn't need. Evan also didn't like some of the design decisions that Angular 1 had. So, Evan started to work on a templating library just for his personal use. After six months, in February 2014, he officially released it as Vue.js, putting it out there for others for others to use. Initially, it was just a templating library but as the community grew and more features got requested Vue got built into the framework that it is today, being compared on the same level as React and Angular.</p><p>Finally, Evan and John discuss Vue's future regarding single file components and proxies. Currently, there are still a lot of problems going with the compile on the fly approach. However, there is a spec being discussed called HTML Modules. Html Imports are getting dropped from the spec. There has been discussion around the HTML Modules spec that looks very similar to what single file components look like on the platform level.</p><p>Evan plans to refactor Vue to leverage proxies. Currently, when Vue receives data, it will walk through all of its properties and convert them to getter/setters, this has caveats such as not tracking newly added properties when it finishes. Proxies allows them to get rid of these caveats. Proxy traps can track these changes!</p><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/f0b13ae5/transcript">"Evan You, creator of Vue.js" Transcript</a></p><h3>Resources</h3><ul><li><a href="https://vuejs.org/">Vue.js Website</a></li><li><a href="https://www.w3.org/TR/html-imports/">HTML Import Spec</a></li><li><a href="https://vuejs.org/v2/guide/reactivity.html">All About Reactivity in Vue</a></li><li><a href="https://experiments.withgoogle.com/chrome">Google Chrome Experiments</a></li><li><a href="https://www.creativelab5.com/">Google Creative Labs Five Program</a></li></ul><h3>Evan You</h3><ul><li><a href="https://github.com/yyx990803">Github</a></li><li><a href="http://evanyou.me/">Website</a></li><li><a href="https://medium.com/@youyuxi">Blog</a></li><li><a href="https://www.linkedin.com/in/evanyou">LinkedIn</a></li><li><a href="https://twitter.com/youyuxi">Twitter</a></li><li><a href="https://www.patreon.com/evanyou">Patreon</a></li></ul><h3>John Lindquist</h3><ul><li><a href="https://twitter.com/johnlindquist?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Twitter</a></li><li><a href="https://egghead.io/instructors/john-lindquist">egghead.io</a></li><li><a href="https://github.com/johnlindquist">Github</a></li><li><a href="https://johnlindquist.com/">Website</a></li></ul>

John Lindquist interviews Evan You, the creator of Vue.js. They discuss what made Evan want to become a developer, how he landed his first job, why he created Vue, and finally proxies and why they're powerful.

Search

Search Results