- Building UpVote!
- Development environment setup
- Code editor
- Development Environment
- Browser
- JavaScript ES6/ES7
- Getting started
- Sample Code
- Previewing the application
- Prepare the app
- Setting up the view
- Making the view data-driven
- The data model
- The Application Instance
- Data binding
- List rendering
- v-for directive
- key
- Sorting
- Computed properties
- Event handling (our app's first interaction)
- The v-on directive
- Reactive state
- Class bindings
- Components
- template
- Props
- v-bind and v-on shorthand syntax
- Congratulations!
- Recap
- Introduction
- Setting up our development environment
- Node.js and npm
- Vue syntax highlighting
- Getting started
- Previewing the app
- Prepare the app
- README.md
- babel.config.js
- node_modules
- package.json {#components_package_json}
- public/
- src/
- .gitignore
- Single-File Components
- Breaking the app into components
- Managing data between components
- Parent-Child Components
- Child-Parent Components
- Sibling Components
- Global Event Bus
- Vuex
- Simple State Management
- Steps to building Vue apps from scratch
- Step 1: A static version of the app
- App.vue
- Step 2: Breaking the app into components
- Step 3: Hardcode Initial States
- CalendarDay
- CalendarEvent
- Step 4: Create state mutations (and corresponding component actions)
- Declaring Reactive State
- getActiveDay | setActiveDay
- submitEvent
- v-model
- v-if
- editEvent
- updateEvent
- deleteEvent
- The Calendar App
- Persistence of data
- State management
- Methodology review
- Introduction
- Preparation
- Previewing the App
- Preparing the App
- README.md
- babel.config.js/
- node_modules/
- package.json
- public/
- server-cart-data.json - server-product-data.json
- server.js
- src/
- vue.config.js
- The Server API
- curl
- JSON endpoints
- Playing with the API
- Client and server
- concurrently
- API proxying
- Preparing the application
- Components
- Single-file components
- Static version of the app
- The Vuex Store
- Vuex Modules
- cartModule - productModule
- productModule
- State
- Mutations
- Actions
- axios
- Getters
- ProductList - ProductListItem
- cartModule
- State
- Mutations
- Actions
- Getters
- CartList - CartListItem
- Interactivity
- ProductListItem
- CartListItem
- CartList
- Vuex and medium to large scale applications
- Mutation Types
- Checkout feature
- File structure
- Recap
- Introduction
- Forms 101
- Preparation
- The Basic Button
- Events and Event Handlers
- Back to the Button
- Text Input
- Accessing DOM elements with $refs
- Using User Input
- Multiple Fields
- Validations
- Form Validation
- fieldErrors
- template errors
- validateForm
- submitForm
- Field Validation
- Async Persistence
- Modify data()
- created()
- Update submitForm()
- Update template
- Vuex
- Vuex and v-model
- Mutations
- Getters
- Updating the form
- Actions
- Form Modules
- vee-validate
- vue-multiselect
- vue-form-generator
- What is routing?
- URL
- URL Requests
- Single-page applications
- Basic Vue Router
- The completed app
- Building a simple router
- Movie Blurbs
- router-view
- router-link
- Try it out
- Using vue-router
- Recap
- Dynamic Route Matching
- The completed app
- The Server API
- Starting point of the app
- Integrating vue-router
- Dynamic Routing
- Recap
- Supporting authenticated routes
- login module
- Implementing login
- Vue Watchers
- Let's try it out
- pending login and navigation buttons
- Navigation Guards
- Global Route Guard
- /login route guard
- /products/:id route guard
- Recap and further reading
- Why do need the Composition API?
- What is the Composition API?
- setup()
- ref()
- reactive()
- What's the difference between ref() and reactive()?
- Other component functions
- computed()
- Lifecycle Hooks
- Composable functions
- Building a simple listings app
- Setup
- server-listings-data.json - server-listings-original.json
- server.js
- app/
- components/
- Updating <App />
- Updating <ListingsList />
- Updating <ListingsListItem />
- Notifications
- useNotification()
- Updating <ListingsList />
- Updating <ListingsListItem />
- Dark Mode
- Updating <App />
- Updating <ListingsList />
- Updating <ListingsListItem />
- Updating <Notification />
- The Store
- provide/inject
- Conclusion
- What is TypeScript?
- Static Typing
- Vue & TypeScript
- tsconfig.json
- eslintrc.json
- src/
- Declaration Files
- Updating component imports with .vue
- defineComponent and <script lang="ts">
- Updating the store
- Interfaces
- TypeScript Generics
- Definining the shape of our store properties
- Updating <App />
- Updating <ListingsList />
- Updating <ListingsListItem />
- Updating parameter used in useNotification() hook
- Annotating Props
- useDarkMode() hook
- useNotification() hook
- Annotating props in <ListingsList />
- Annotating props in <ListingsListItem />
- Annotating props in <Notification />
- Conclusion
- GraphQL
- Consuming GraphQL
- The GraphQL API we'll be working with
- listings query
- deleteListing mutation
- Vue Apollo
- Running both the server and the client
- src/
- Vue Apollo
- Making a GraphQL request with HTTP
- Creating our Apollo Client
- useQuery()
- useResult()
- useMutation()
- Vue Apollo Cache
- Removing the button
- Removing the store
- Conclusion
Fullstack Vue
Chapter 2:
Your first Vue.js Web Application
Chapter 3:
Single-file components
Chapter 6:
Vuex and Servers
Chapter 7:
Form Handling
Chapter 8:
Routing
Chapter 9:
Composition API
Chapter 10:
TypeScript
Chapter 11:
Vue Apollo & GraphQL
This page is a preview of Fullstack Vue