A collection of useful Vue.js snippets and patterns.
Fork, download, or clone this repository and run locally to interact with the examples and read the code in parallel. The snippets are best understood through local execution using Vue Devtools. Running this application locally while browsing the components using the Vue Devtools extension will allow you to see how the code snippets enact the changes in the DOM that are described below. Without Vue Devtools, you won't be able to see how data is manipulated.
- This example shows how we can influence the style of the component by passing props which directly edit the CSS/SASS of the component itself.
- Example: You're creating a button component, and you want other developers on your project to be able to use it. However, they are working on different pages in the application, and they need to be able to control the button's text color and font styling.
- How to create a custom component which naturally interfaces with the
v-modelparadigm of Vue.js, and allows us to pass information up to parent components from a child. - Example: You're creating a text input component, and want to get data out of it so that the parent component which is displaying the text input can do a computation using the input text.
- How to manipulate data in a child component which is passed down from the parent component.
- Example: You're creating a component which has to display the most current data in the global store (Vuex), but your component also has to change that data and (both) re-render the correct data, and save it in the global store.
The following commands are used to develop the project:
npm run build- Build the package distribution bundle.npm run serve- Start a development server with live-reloading on changes. (Used for previewing individual components.)npm run lint- Lint code using ESLint and Vue, AirBnB, and Prettier configs.npm run test:unit- Run unit tests for the individual components in the package.