package.json

{
    "title" : "Vue.js Fundamentals",
    "chapter 1" : {
        "title" : "Component Basics",
        "lessons" : {
            "lesson 1" : {
                "title": "Introduction to Components",
                "description": "In this lesson, we'll learn about Vue components. We'll get an introduction to what a component is, why we need components and lastly how we can create and use a component in our Vue.js app.",
                "author" : "vueschool.io"
            },
            "lesson 2" : {
                "title": "Component's Template",
                "description": "In this lesson, we're going to learn about a Vue component's template. Essentially, the template is where we define our HTML and general markup for our component. We also bind our component's data to the DOM in the template. In Vue.js, we can define our template in a few different ways. In this lesson, we'll move away from the inline template and use the x-template technique, which is great when you're getting started.",
                "author" : "vueschool.io"
            }, 
            "lesson 3" : {
                "title": "Reusable Components with Props",
                "description": "In this lesson, we'll see a realistic use case for reusable components and learn about Vue.js component props. Props are custom HTML attributes that we can register on our components, which allow us to pass data to our components. You can find the starting point of the demo in this lesson in the link. We've also created a jsfiddle if you want to play around with the code.",
                "author" : "vueschool.io"
            },
            "lesson 4" : {
                "title": "Nested Components",
                "description": "Components allow us to encapsulate functionality and easily reuse them in multiple places in our applications. It is common to have components inside other components to compose the bigger features of our apps. In this lesson, we'll learn how we can create a plan-picker component, to easily display all our plans wherever we want.",
                "author" : "vueschool.io"
            },
            "lesson 5" : {
                "title": "Global vs Local Components",
                "description": "Vue.js allows us to register components both globally and locally. In this lesson, we'll learn the difference between the two types and how it can affect the build size and performance of your application.",
                "author" : "vueschool.io"
            },
            "lesson 6" : {
                "title": "Communication Between Components with Custom Events",
                "description": "We know how to pass data to a child component through props. In this lesson, we'll learn how to communicate from a child to a parent component through custom events. We will use a custom event to notify the plan-picker of which plan has been selected, and make sure we have the right logic in place so the user can only select one plan at a time.",
                "author" : "vueschool.io"
            }
        }
    },
    "chapter 2" : {
        "title" : "Components In-depth",
        "lesson 7" : {
            "title": "Component Naming Best Practices",
            "description": "In this lesson, we'll learn the best practices of naming our Vue.js components. By following the best practices and official [Vue.js Style Guide](https://v2.vuejs.org/v2/style-guide/?redirect=true) our applications will be easier to understand for other developers, just by taking a look at the component files.",
            "author" : "vueschool.io"
        },
        "lesson 8" : {
            "title": "Component Lifecycle Hooks",
            "description": "In this lesson, we learn what Vue.js component lifecycle hooks are and how we can use them. If you want to learn more about Vue.js lifecycle hooks, we recommend our Understanding the [Vue.js Lifecycle Hooks](https://vueschool.io/lessons/understanding-the-vuejs-lifecycle-hooks) lesson.",
            "author" : "vueschool.io"
        },
        "lesson 9" : {
            "title": "Component Slots",
            "description": "In this lesson, we'll learn how to pass HTML to our Vue.js components using slots. Slots are an awesome feature of Vue.js, and this lesson will teach you what you need to know to get started.",
            "remember" : "If you need to pass HTML to your components, use slots. If you need to pass data, use props.",
            "author" : "vueschool.io"
        }
    },
    "chapter 3" : {
        "title" : "Vue.js Component Exercises",
        "lesson 10" : {
            "title": "#1 Build a GitHub User Profile Component",
            "description": "This lesson is a component exercise lesson, where we're going to use everything we've learned about Vue.js components so far. The goal is to create a component that displays a person’s GitHub profile. Including the user's avatar, name, register date, bio, and followers. In the exercise, we'll be using Semantic UI, we'll specifically use the card element. We've prepared a boilerplate as a starting point for the exercise. The Github API endpoint we'll be using is: https://api.github.com/users",
            "author" : "vueschool.io"
        },
        "lesson 11" : {
            "title": "#2 Create a Notification Message Component",
            "description": "This lesson is also a component exercise lesson, where we're going to use everything we've learned about Vue.js components so far. In this component exercise, we're going to build a fun and useful component that is a notification message. In the exercise, we'll be using (Semantic UI)[https://semantic-ui.com/], we'll specifically use the (message element)[https://semantic-ui.com/collections/message.html#positive--success]. We've prepared a (boilerplate)[https://github.com/vueschool/vuejs-components-fundamentals/blob/master/notification-message/boilerplate.html] as a starting point for the exercise. Your goal is to create a component that will be passed some content (the message) and the type of notification (info, error, success). The user should also be able to close the notification.",
            "author" : "vueschool.io"
        }
    },
    "About the course" :{
        "description": "Components are the puzzle pieces of a Vue.js website. Learn the fundamental and important concept of Vue.js components in this course.",
        "After this course, you'll be familiar with:": {
            "1": "The idea behind components and how Vue.js components work",
            "2": "Component's template, and multiple ways to define your template",
            "3": "Communication between components with props and custom events",
            "4": "What is the true difference between global and local component registration",
            "5": "The lifecycle hooks of a component",
            "6": "Component composition with nested components and slots",
            "7": "Component's best practices and common pitfalls"
        },
        "Watch the course": "[Vue.js Components Fundamentals Course](https://vueschool.io/courses/vuejs-components-fundamentals)"
    }
    
}