├── .gitignore ├── CODE_OF_CONDUCT.md ├── README.md ├── commenting-solution ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── IndividualComment.vue │ ├── main.js │ └── store │ │ └── index.js └── yarn.lock ├── components-exercise-solution ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── AppPlace.vue │ └── main.js └── yarn.lock ├── setup1 ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── AppChild.vue │ ├── main.js │ └── store │ │ └── index.js └── yarn.lock ├── setup2 ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ └── README.md ├── components │ ├── AppChild.vue │ ├── AppMenu.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ ├── cart.vue │ └── index.vue ├── plugins │ └── README.md ├── static │ ├── README.md │ └── favicon.ico ├── store │ └── README.md └── yarn.lock ├── vue2-resources ├── README.md ├── commentform-problem │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── IndividualComment.vue │ │ └── main.js │ ├── webpack.config.js │ └── yarn.lock ├── commentform-solution │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── IndividualComment.vue │ │ ├── main.js │ │ └── store │ │ │ └── store.js │ ├── webpack.config.js │ └── yarn.lock ├── mixins-example │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── Merging.vue │ │ │ ├── Modal.vue │ │ │ └── Tooltip.vue │ │ ├── main.js │ │ └── mixins │ │ │ ├── hi.js │ │ │ └── toggle.js │ ├── webpack.config.js │ └── yarn.lock ├── nuxt-css-animation-starter │ ├── .editorconfig │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── assets │ │ ├── README.md │ │ ├── main.css │ │ └── normalize.css │ ├── components │ │ ├── Logo.vue │ │ └── README.md │ ├── layouts │ │ ├── README.md │ │ └── default.vue │ ├── middleware │ │ └── README.md │ ├── nuxt.config.js │ ├── package.json │ ├── pages │ │ ├── README.md │ │ ├── contact.vue │ │ ├── index.vue │ │ └── product.vue │ ├── plugins │ │ └── README.md │ ├── static │ │ ├── README.md │ │ └── favicon.ico │ ├── store │ │ └── README.md │ └── yarn.lock ├── nuxt-fixed-transition-modes │ ├── .gitignore │ ├── .glitch-assets │ ├── app │ │ └── client.js │ ├── components │ │ └── Logo.vue │ ├── layouts │ │ └── default.vue │ ├── nuxt.config.js │ ├── package.json │ ├── pages │ │ ├── about.vue │ │ ├── index.vue │ │ └── test.vue │ └── static │ │ └── favicon.ico ├── nuxt-js-animation-starter │ ├── .editorconfig │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── assets │ │ ├── README.md │ │ ├── main.css │ │ └── normalize.css │ ├── components │ │ ├── README.md │ │ └── Test.vue │ ├── layouts │ │ ├── README.md │ │ └── default.vue │ ├── middleware │ │ └── README.md │ ├── nuxt.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── README.md │ │ ├── contact.vue │ │ ├── index.vue │ │ └── product.vue │ ├── plugins │ │ └── README.md │ ├── static │ │ ├── README.md │ │ └── favicon.ico │ ├── store │ │ └── README.md │ └── yarn.lock ├── setup1 │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── Child.vue │ │ └── main.js │ ├── webpack.config.js │ └── yarn.lock ├── setup2 │ ├── .editorconfig │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── assets │ │ └── README.md │ ├── components │ │ ├── Child.vue │ │ ├── MainMenu.vue │ │ └── README.md │ ├── layouts │ │ ├── README.md │ │ └── default.vue │ ├── middleware │ │ └── README.md │ ├── nuxt.config.js │ ├── package.json │ ├── pages │ │ ├── README.md │ │ ├── cart.vue │ │ └── index.vue │ ├── plugins │ │ └── README.md │ ├── static │ │ ├── README.md │ │ └── favicon.ico │ ├── store │ │ └── README.md │ └── yarn.lock └── vuex-example │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Action.vue │ │ ├── AdjustState.vue │ │ ├── Getter.vue │ │ └── Mutation.vue │ ├── main.js │ └── store │ │ └── store.js │ ├── webpack.config.js │ └── yarn.lock └── vuex-example ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── AppAction.vue │ ├── AppGetter.vue │ └── AppMutation.vue ├── main.js └── store │ └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | ### OSX ### 2 | *.DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | 6 | # Icon must end with two \r 7 | Icon 8 | # Thumbnails 9 | ._* 10 | # Files that might appear in the root of a volume 11 | .DocumentRevisions-V100 12 | .fseventsd 13 | .Spotlight-V100 14 | .TemporaryItems 15 | .Trashes 16 | .VolumeIcon.icns 17 | .com.apple.timemachine.donotpresent 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | 26 | ### Node ### 27 | # Logs 28 | logs 29 | *.log 30 | npm-debug.log* 31 | 32 | # Runtime data 33 | pids 34 | *.pid 35 | *.seed 36 | *.pid.lock 37 | 38 | # Directory for instrumented libs generated by jscoverage/JSCover 39 | lib-cov 40 | 41 | # Coverage directory used by tools like istanbul 42 | coverage 43 | 44 | # nyc test coverage 45 | .nyc_output 46 | 47 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 48 | .grunt 49 | 50 | # node-waf configuration 51 | .lock-wscript 52 | 53 | # Compiled binary addons (http://nodejs.org/api/addons.html) 54 | build/Release 55 | 56 | # Dependency directories 57 | node_modules 58 | jspm_packages 59 | 60 | # Optional npm cache directory 61 | .npm 62 | 63 | # Optional eslint cache 64 | .eslintcache 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | ## 1. Purpose 4 | 5 | A primary goal of Intro To Vue is to be inclusive to the largest number of contributors, with the most varied and diverse backgrounds possible. As such, we are committed to providing a friendly, safe and welcoming environment for all, regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status, and religion (or lack thereof). 6 | 7 | This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior. 8 | 9 | We invite all those who participate in Intro To Vue to help us create safe and positive experiences for everyone. 10 | 11 | ## 2. Open Source Citizenship 12 | 13 | A supplemental goal of this Code of Conduct is to increase open source citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community. 14 | 15 | Communities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society. 16 | 17 | If you see someone who is making an extra effort to ensure our community is welcoming, friendly, and encourages all participants to contribute to the fullest extent, we want to know. 18 | 19 | ## 3. Expected Behavior 20 | 21 | The following behaviors are expected and requested of all community members: 22 | 23 | * Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community. 24 | * Exercise consideration and respect in your speech and actions. 25 | * Attempt collaboration before conflict. 26 | * Refrain from demeaning, discriminatory, or harassing behavior and speech. 27 | * Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential. 28 | * Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations. 29 | 30 | ## 4. Unacceptable Behavior 31 | 32 | The following behaviors are considered harassment and are unacceptable within our community: 33 | 34 | * Violence, threats of violence or violent language directed against another person. 35 | * Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language. 36 | * Posting or displaying sexually explicit or violent material. 37 | * Posting or threatening to post other people’s personally identifying information ("doxing"). 38 | * Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability. 39 | * Inappropriate photography or recording. 40 | * Inappropriate physical contact. You should have someone’s consent before touching them. 41 | * Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances. 42 | * Deliberate intimidation, stalking or following (online or in person). 43 | * Advocating for, or encouraging, any of the above behavior. 44 | * Sustained disruption of community events, including talks and presentations. 45 | 46 | ## 5. Consequences of Unacceptable Behavior 47 | 48 | Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated. 49 | 50 | Anyone asked to stop unacceptable behavior is expected to comply immediately. 51 | 52 | If a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event). 53 | 54 | ## 6. Reporting Guidelines 55 | 56 | If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible. sarah.drasner@gmail.com. 57 | 58 | 59 | 60 | Additionally, community organizers are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress. 61 | 62 | ## 7. Addressing Grievances 63 | 64 | If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify sdras with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies. 65 | 66 | 67 | 68 | ## 8. Scope 69 | 70 | We expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues–online and in-person–as well as in all one-on-one communications pertaining to community business. 71 | 72 | This code of conduct and its related procedures also applies to unacceptable behavior occurring outside the scope of community activities when such behavior has the potential to adversely affect the safety and well-being of community members. 73 | 74 | ## 9. Contact info 75 | 76 | sarah.drasner@gmail.com 77 | 78 | ## 10. License and attribution 79 | 80 | This Code of Conduct is distributed under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/). 81 | 82 | Portions of text derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/) and the [Geek Feminism Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy). 83 | 84 | Retrieved on November 22, 2016 from [http://citizencodeofconduct.org/](http://citizencodeofconduct.org/) 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Introduction to Vue.js 3 Course](https://frontendmasters.com/courses/vue-3/) Materials 2 | 3 | Author: Sarah Drasner 4 | 5 | FYI The previous version [Vue 2 course is available here.](https://frontendmasters.com/courses/vue/) 6 | 7 | This repo houses the materials and resources for the Introduction to Vue.js course on Frontend Masters. 8 | 9 | Most of the materials for the course are outlined below, but there are also directories housed here of very basic examples of some of the techniques we will cover so that students don't have to spend a lot of time researching in order to get started. It is recommended that students use CodePen to create work for the duration of the course, as we'll use preprocessors like SCSS as well as Babel for ES6, and resources like Vue.js, both prod and dev versions, codepen makes it easy to do so without time devoted to setup. If you like, you can also scroll to the CodePen collection section and fork one of the existing pens in those collections, they are comprehensive. There are more true-to-life build process examples, in the VueCLI, Nuxt, and Vuex Resource Sections. It's encouraged to watch the lecture to learn how to set up the builds yourself, though. 10 | 11 | - Here are the [Vue chrome devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) 12 | - Here are the [Vue 3 beta chrome devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg) 13 | - Here is the codepen debugger [chrome extension](https://chrome.google.com/webstore/detail/codopen/agnkphdgffianchpipdbkeaclfbobaak) 14 | - Here is [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) for VS Code 15 | - Here are the snippets I'll be using [vue vscode snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) 16 | - Here is my [Vue Extension Pack for VS Code](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack) 17 | - Here is the [hub tool](https://hub.github.com/) I use to work with GitHub from the command line 18 | 19 | # Materials for Vue 3 Course 20 | 21 | ## Slides: 22 | 23 | **All slides have password `!vue!`** 24 | 25 | - [Intro to Vue Intro](https://slides.com/sdrasner/deck?token=gsSM2n2V) 26 | - [Intro to Vue 1: Directives & Data Rendering](https://slides.com/sdrasner/intro-to-vue3-1?token=n3Yja_t9) 27 | - [Intro to Vue 2: Methods, Computed, Watchers](https://slides.com/sdrasner/intro-to-vue3-2?token=jgTfDndR) 28 | - [Intro to Vue 3: Components and Slots](https://slides.com/sdrasner/intro-to-vue-3-3?token=NLsRwMvr) 29 | - [Intro to Vue 4: Vue CLI and Nuxt](https://slides.com/sdrasner/intro-to-vue-3-4?token=0IQFDZvK) 30 | - [Intro to Vue 5: Animation](https://slides.com/sdrasner/intro-to-vue-3-5?token=YXhIwtpW) 31 | - [Intro to Vue 6: Composition API and Custom Directives](https://slides.com/sdrasner/intro-to-vue-3-6?token=yidUZcRL) 32 | - [Intro to Vue 7: Vuex](https://slides.com/sdrasner/intro-to-vue-3-7?token=YvT8ZUzV) 33 | 34 | _This course has been updated in 2020 for the Vue3 release, older materials for Vue 2 course available in the vue2-resources directory._ 35 | 36 | ## License 37 | 38 | [![Creative Commons License](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-nc-sa/4.0/) 39 | 40 | This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/) 41 | -------------------------------------------------------------------------------- /commenting-solution/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /commenting-solution/README.md: -------------------------------------------------------------------------------- 1 | # commenting-solution 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /commenting-solution/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /commenting-solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commenting-solution", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "vue": "^2.6.11", 12 | "vuex": "^3.4.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^4.5.0", 16 | "@vue/cli-service": "^4.5.0", 17 | "node-sass": "^4.12.0", 18 | "sass-loader": "^8.0.2", 19 | "vue-template-compiler": "^2.6.11" 20 | }, 21 | "browserslist": [ 22 | "> 1%", 23 | "last 2 versions", 24 | "not dead" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /commenting-solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/commenting-solution/public/favicon.ico -------------------------------------------------------------------------------- /commenting-solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | <%= htmlWebpackPlugin.options.title %> 11 | 12 | 13 | 14 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /commenting-solution/src/App.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 48 | 49 | 143 | -------------------------------------------------------------------------------- /commenting-solution/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/commenting-solution/src/assets/logo.png -------------------------------------------------------------------------------- /commenting-solution/src/components/IndividualComment.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /commenting-solution/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import store from './store' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | store, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /commenting-solution/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | comments: [{ 9 | text: 'Looks great Julianne!', 10 | author: 'Robin Rendle', 11 | authorImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/v-coffee.jpg' 12 | }, 13 | { 14 | text: 'I love the Sea', 15 | author: 'Miriam Suzanne', 16 | authorImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/v-miriam.jpg' 17 | }, 18 | { 19 | text: 'Where are you?', 20 | author: 'Geoff Graham', 21 | authorImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/v-geoff.jpg' 22 | } 23 | ] 24 | }, 25 | mutations: { 26 | addComment(state, comment) { 27 | const newCommentObj = { 28 | text: comment, 29 | author: 'Magoo', 30 | authorImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/v-skull.jpg' 31 | }; 32 | state.comments.push(newCommentObj); 33 | } 34 | } 35 | }) -------------------------------------------------------------------------------- /components-exercise-solution/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /components-exercise-solution/README.md: -------------------------------------------------------------------------------- 1 | # components-exercise-solution 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /components-exercise-solution/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /components-exercise-solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "components-exercise-solution", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "normalize.css": "^8.0.1", 12 | "vue": "^2.6.11" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^4.5.0", 16 | "@vue/cli-service": "^4.5.0", 17 | "node-sass": "^4.12.0", 18 | "sass-loader": "^8.0.2", 19 | "vue-template-compiler": "^2.6.11" 20 | }, 21 | "browserslist": [ 22 | "> 1%", 23 | "last 2 versions", 24 | "not dead" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /components-exercise-solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/components-exercise-solution/public/favicon.ico -------------------------------------------------------------------------------- /components-exercise-solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | <%= htmlWebpackPlugin.options.title %> 11 | 12 | 13 | 14 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /components-exercise-solution/src/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 49 | 50 | 67 | -------------------------------------------------------------------------------- /components-exercise-solution/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/components-exercise-solution/src/assets/logo.png -------------------------------------------------------------------------------- /components-exercise-solution/src/components/AppPlace.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /components-exercise-solution/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import "normalize.css" 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | }).$mount('#app') -------------------------------------------------------------------------------- /setup1/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /setup1/README.md: -------------------------------------------------------------------------------- 1 | # setup1 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /setup1/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /setup1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "setup1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "vue": "^2.6.11", 12 | "vuex": "^3.4.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^4.4.0", 16 | "@vue/cli-service": "^4.4.0", 17 | "node-sass": "^4.12.0", 18 | "sass-loader": "^8.0.2", 19 | "vue-template-compiler": "^2.6.11" 20 | }, 21 | "browserslist": [ 22 | "> 1%", 23 | "last 2 versions", 24 | "not dead" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /setup1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/setup1/public/favicon.ico -------------------------------------------------------------------------------- /setup1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | <%= htmlWebpackPlugin.options.title %> 13 | 14 | 15 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /setup1/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 38 | 39 | 126 | -------------------------------------------------------------------------------- /setup1/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/setup1/src/assets/logo.png -------------------------------------------------------------------------------- /setup1/src/components/AppChild.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 25 | 26 | -------------------------------------------------------------------------------- /setup1/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import store from './store' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | store, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /setup1/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | }, 9 | mutations: { 10 | }, 11 | actions: { 12 | }, 13 | modules: { 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /setup2/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /setup2/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /setup2/README.md: -------------------------------------------------------------------------------- 1 | # setup2 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 21 | -------------------------------------------------------------------------------- /setup2/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /setup2/components/AppChild.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 27 | 28 | -------------------------------------------------------------------------------- /setup2/components/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 39 | 40 | -------------------------------------------------------------------------------- /setup2/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /setup2/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /setup2/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 127 | -------------------------------------------------------------------------------- /setup2/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /setup2/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: "universal", 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: "static", 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | head: { 17 | title: process.env.npm_package_name || "", 18 | meta: [ 19 | { charset: "utf-8" }, 20 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 21 | { 22 | hid: "description", 23 | name: "description", 24 | content: process.env.npm_package_description || "" 25 | } 26 | ], 27 | link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }] 28 | }, 29 | /* 30 | ** Global CSS 31 | */ 32 | css: [], 33 | /* 34 | ** Plugins to load before mounting the App 35 | ** https://nuxtjs.org/guide/plugins 36 | */ 37 | plugins: [], 38 | /* 39 | ** Auto import components 40 | ** See https://nuxtjs.org/api/configuration-components 41 | */ 42 | components: true, 43 | /* 44 | ** Nuxt.js dev-modules 45 | */ 46 | buildModules: [], 47 | /* 48 | ** Nuxt.js modules 49 | */ 50 | modules: [], 51 | /* 52 | ** Build configuration 53 | ** See https://nuxtjs.org/api/configuration-build/ 54 | */ 55 | build: {} 56 | }; 57 | -------------------------------------------------------------------------------- /setup2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "setup2", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "export": "nuxt export", 10 | "serve": "nuxt serve" 11 | }, 12 | "dependencies": { 13 | "nuxt": "^2.14.5" 14 | }, 15 | "devDependencies": {} 16 | } 17 | -------------------------------------------------------------------------------- /setup2/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /setup2/pages/cart.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 29 | 30 | -------------------------------------------------------------------------------- /setup2/pages/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /setup2/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /setup2/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /setup2/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/setup2/static/favicon.ico -------------------------------------------------------------------------------- /setup2/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /vue2-resources/README.md: -------------------------------------------------------------------------------- 1 | # Past Resources for Vue 2 Course 2 | 3 | ## Slides: 4 | 5 | **All slides have password `!vue!`** 6 | 7 | - [Intro to Vue 1: Directives & Data Rendering](http://slides.com/sdrasner/intro-to-vue-1?token=9-aFNhlX) 8 | - [Intro to Vue 2: Methods, Computed, Watchers](http://slides.com/sdrasner/intro-to-vue-2?token=502n2b7V) 9 | - [Intro to Vue 3: Components, Slots](http://slides.com/sdrasner/intro-to-vue-3?token=LwIVIblm) 10 | - [Intro to Vue 4: Vue CLI & Nuxt](http://slides.com/sdrasner/intro-to-vue-4?token=Xb4oA4YR) 11 | - [Intro to Vue 5: Vue Animations](http://slides.com/sdrasner/intro-to-vue-5?token=5zRhIuNg) 12 | - [Intro to Vue 5.5: Vue Animations](https://slides.com/sdrasner/animating-vue-35/) 13 | - [Intro to Vue 6: Filters, Mixins, & Custom Directives](http://slides.com/sdrasner/intro-to-vue-6?token=fcL8qgTg) 14 | - [Intro to Vue 7: Vuex](http://slides.com/sdrasner/intro-to-vue-7?token=u9qUgRsW) 15 | 16 | ## Collections: 17 | 18 | - [Vue Workshop Materials Collection](https://codepen.io/collection/noYZxW/) 19 | - [Vue Animation Collection](https://codepen.io/collection/XQGkeV/) 20 | 21 | Included in this repo are some very basic starter kits. 22 | 23 | ## VueCLI Resources 24 | 25 | - [Vue-CLI](https://github.com/vuejs/vue-cli) 26 | - [Wine Label Maker Demo](https://github.com/sdras/vue-wine-label) 27 | 28 | There's a directory you can use as a Vue-CLI starter kit: 29 | 30 | - setup1 31 | 32 | ## Nuxt Resources 33 | 34 | - [Nuxt Docs](https://nuxtjs.org/) 35 | - [Nuxt Type Demo](https://github.com/sdras/nuxt-type) 36 | 37 | There are directories you can use as Nuxt starter kits: 38 | 39 | - setup2 40 | - nuxt-css-animation-starter 41 | - nuxt-js-animation-starter 42 | - nuxt-fixed-transition-modes 43 | 44 | ## Vuex Resources 45 | 46 | - [Vuex docs](https://vuex.vuejs.org/en/) 47 | - [Vue Weather Notifier Demo](https://github.com/sdras/vue-weather-notifier) 48 | 49 | There's a directory you can use as a Vuex starter kit: 50 | 51 | - vuex-example 52 | 53 | Here are the directories for the Vuex exercise: 54 | 55 | - commentform-problem 56 | - commentform-solution 57 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/README.md: -------------------------------------------------------------------------------- 1 | # commentform 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | commentform 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commentform", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "Sarah Drasner ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.3.3" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-env": "^1.5.1", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^12.1.0", 22 | "vue-template-compiler": "^2.3.3", 23 | "webpack": "^2.6.1", 24 | "webpack-dev-server": "^2.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/src/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 68 | 69 | 164 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/commentform-problem/src/assets/logo.png -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/src/components/IndividualComment.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /vue2-resources/commentform-problem/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | } 19 | // other vue-loader options go here 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | loader: 'file-loader', 30 | options: { 31 | name: '[name].[ext]?[hash]' 32 | } 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | 'vue$': 'vue/dist/vue.esm.js' 39 | } 40 | }, 41 | devServer: { 42 | historyApiFallback: true, 43 | noInfo: true 44 | }, 45 | performance: { 46 | hints: false 47 | }, 48 | devtool: '#eval-source-map' 49 | } 50 | 51 | if (process.env.NODE_ENV === 'production') { 52 | module.exports.devtool = '#source-map' 53 | // http://vue-loader.vuejs.org/en/workflow/production.html 54 | module.exports.plugins = (module.exports.plugins || []).concat([ 55 | new webpack.DefinePlugin({ 56 | 'process.env': { 57 | NODE_ENV: '"production"' 58 | } 59 | }), 60 | new webpack.optimize.UglifyJsPlugin({ 61 | sourceMap: true, 62 | compress: { 63 | warnings: false 64 | } 65 | }), 66 | new webpack.LoaderOptionsPlugin({ 67 | minimize: true 68 | }) 69 | ]) 70 | } 71 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/README.md: -------------------------------------------------------------------------------- 1 | # commentform 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | commentform 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commentform", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "Sarah Drasner ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.3.3", 13 | "vuex": "^2.3.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-env": "^1.5.1", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "vue-loader": "^12.1.0", 23 | "vue-template-compiler": "^2.3.3", 24 | "webpack": "^2.6.1", 25 | "webpack-dev-server": "^2.4.5" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/src/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 50 | 51 | 148 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/commentform-solution/src/assets/logo.png -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/src/components/IndividualComment.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import { store } from './store/store'; 5 | 6 | new Vue({ 7 | el: '#app', 8 | store, 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | Vue.use(Vuex); 5 | 6 | export const store = new Vuex.Store({ 7 | state: { 8 | comments: [ 9 | { 10 | text: 'Looks great Julianne!', 11 | author: 'Robin Rendle', 12 | authorImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/v-coffee.jpg' 13 | }, 14 | { 15 | text: 'I love the Sea', 16 | author: 'Miriam Suzanne', 17 | authorImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/v-miriam.jpg' 18 | }, 19 | { 20 | text: 'Where are you?', 21 | author: 'Geoff Graham', 22 | authorImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/v-geoff.jpg' 23 | } 24 | ] 25 | }, 26 | mutations: { 27 | addComment(state, comment) { 28 | const newCommentObj = { 29 | text: comment, 30 | author: 'Magoo', 31 | authorImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/v-skull.jpg' 32 | }; 33 | state.comments.push(newCommentObj); 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /vue2-resources/commentform-solution/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | } 19 | // other vue-loader options go here 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | loader: 'file-loader', 30 | options: { 31 | name: '[name].[ext]?[hash]' 32 | } 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | 'vue$': 'vue/dist/vue.esm.js' 39 | } 40 | }, 41 | devServer: { 42 | historyApiFallback: true, 43 | noInfo: true 44 | }, 45 | performance: { 46 | hints: false 47 | }, 48 | devtool: '#eval-source-map' 49 | } 50 | 51 | if (process.env.NODE_ENV === 'production') { 52 | module.exports.devtool = '#source-map' 53 | // http://vue-loader.vuejs.org/en/workflow/production.html 54 | module.exports.plugins = (module.exports.plugins || []).concat([ 55 | new webpack.DefinePlugin({ 56 | 'process.env': { 57 | NODE_ENV: '"production"' 58 | } 59 | }), 60 | new webpack.optimize.UglifyJsPlugin({ 61 | sourceMap: true, 62 | compress: { 63 | warnings: false 64 | } 65 | }), 66 | new webpack.LoaderOptionsPlugin({ 67 | minimize: true 68 | }) 69 | ]) 70 | } 71 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/README.md: -------------------------------------------------------------------------------- 1 | # mixins 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | mixins 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mixins", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "Sarah Drasner ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.3.3" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-env": "^1.5.1", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^12.1.0", 22 | "vue-template-compiler": "^2.3.3", 23 | "webpack": "^2.6.1", 24 | "webpack-dev-server": "^2.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 118 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/mixins-example/src/assets/logo.png -------------------------------------------------------------------------------- /vue2-resources/mixins-example/src/components/Merging.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 23 | 24 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 23 | 24 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/src/components/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | // Vue.mixin({ 5 | // mounted() { 6 | // console.log('hello from global mixin!') 7 | // } 8 | // }) 9 | 10 | new Vue({ 11 | el: '#app', 12 | render: h => h(App) 13 | }) 14 | -------------------------------------------------------------------------------- /vue2-resources/mixins-example/src/mixins/hi.js: -------------------------------------------------------------------------------- 1 | export const hi = { 2 | methods: { 3 | sayHello: function() { 4 | console.log('hello from mixin!') 5 | } 6 | }, 7 | mounted() { 8 | this.sayHello() 9 | } 10 | } -------------------------------------------------------------------------------- /vue2-resources/mixins-example/src/mixins/toggle.js: -------------------------------------------------------------------------------- 1 | export const toggle = { 2 | data() { 3 | return { 4 | isShowing: false 5 | } 6 | }, 7 | methods: { 8 | toggleShow() { 9 | this.isShowing = !this.isShowing; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /vue2-resources/mixins-example/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | } 19 | // other vue-loader options go here 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | loader: 'file-loader', 30 | options: { 31 | name: '[name].[ext]?[hash]' 32 | } 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | 'vue$': 'vue/dist/vue.esm.js' 39 | } 40 | }, 41 | devServer: { 42 | historyApiFallback: true, 43 | noInfo: true 44 | }, 45 | performance: { 46 | hints: false 47 | }, 48 | devtool: '#eval-source-map' 49 | } 50 | 51 | if (process.env.NODE_ENV === 'production') { 52 | module.exports.devtool = '#source-map' 53 | // http://vue-loader.vuejs.org/en/workflow/production.html 54 | module.exports.plugins = (module.exports.plugins || []).concat([ 55 | new webpack.DefinePlugin({ 56 | 'process.env': { 57 | NODE_ENV: '"production"' 58 | } 59 | }), 60 | new webpack.optimize.UglifyJsPlugin({ 61 | sourceMap: true, 62 | compress: { 63 | warnings: false 64 | } 65 | }), 66 | new webpack.LoaderOptionsPlugin({ 67 | minimize: true 68 | }) 69 | ]) 70 | } 71 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | env: { 5 | browser: true, 6 | node: true 7 | }, 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | rules: {}, 15 | globals: {} 16 | } 17 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/README.md: -------------------------------------------------------------------------------- 1 | # nuxt-two 2 | 3 | > Nuxt.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm install # Or yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 23 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/assets/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */ 3 | background: #222; 4 | color: white; 5 | width: 100vw; 6 | height: 100vh; 7 | } 8 | 9 | a, a:visited { 10 | color: #3edada; 11 | text-decoration: none; 12 | } 13 | 14 | .container { 15 | padding: 60px; 16 | width: 100vw; 17 | height: 100vh; 18 | } 19 | 20 | /* animation styles */ 21 | 22 | .page-enter-active { 23 | animation: acrossIn .65s ease-out both; 24 | } 25 | 26 | .page-leave-active { 27 | animation: acrossOut .85s ease-in both; 28 | } 29 | 30 | @keyframes acrossIn { 31 | 0% { 32 | transform: translate3d(-100%, 0, 0); 33 | } 34 | 35 | 100% { 36 | transform: translate3d(0, 0, 0); 37 | } 38 | } 39 | 40 | @keyframes acrossOut { 41 | 0% { 42 | transform: translate3d(0, 0, 0); 43 | } 44 | 45 | 100% { 46 | transform: translate3d(100%, 0, 0); 47 | } 48 | } 49 | 50 | .fadeOpacity-enter-active, .fadeOpacity-leave-active { 51 | transition: opacity .35s ease-out; 52 | } 53 | 54 | .fadeOpacity-enter, .fadeOpacity-leave-active { 55 | opacity: 0; 56 | } 57 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/assets/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 2 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 79 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 54 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | head: { 6 | title: 'starter', 7 | meta: [ 8 | { charset: 'utf-8' }, 9 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 10 | { hid: 'description', name: 'description', content: 'Nuxt.js project' } 11 | ], 12 | link: [ 13 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 14 | ] 15 | }, 16 | loading: false, 17 | css: ['assets/normalize.css', 'assets/main.css'], 18 | /* 19 | ** Build configuration 20 | */ 21 | build: { 22 | /* 23 | ** Run ESLINT on save 24 | */ 25 | extend (config, ctx) { 26 | if (ctx.isClient) { 27 | config.module.rules.push({ 28 | enforce: 'pre', 29 | test: /\.(js|vue)$/, 30 | loader: 'eslint-loader', 31 | exclude: /(node_modules)/ 32 | }) 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-two", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js project", 5 | "author": "Sarah Drasner ", 6 | "private": true, 7 | "dependencies": { 8 | "nuxt": "latest" 9 | }, 10 | "scripts": { 11 | "dev": "nuxt", 12 | "build": "nuxt build", 13 | "start": "nuxt start", 14 | "generate": "nuxt generate", 15 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 16 | "precommit": "npm run lint" 17 | }, 18 | "devDependencies": { 19 | "babel-eslint": "^7.1.1", 20 | "eslint": "^3.15.0", 21 | "eslint-config-standard": "^6.2.1", 22 | "eslint-loader": "^1.6.1", 23 | "eslint-plugin-html": "^2.0.0", 24 | "eslint-plugin-promise": "^3.4.1", 25 | "eslint-plugin-standard": "^2.0.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/pages/contact.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/pages/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/pages/product.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/nuxt-css-animation-starter/static/favicon.ico -------------------------------------------------------------------------------- /vue2-resources/nuxt-css-animation-starter/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/.glitch-assets: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/nuxt-fixed-transition-modes/.glitch-assets -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/app/client.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import Vue from 'vue' 4 | import middleware from './middleware' 5 | import { createApp, NuxtError } from './index' 6 | import { applyAsyncData, sanitizeComponent, getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, middlewareSeries, promisify, getLocation, compile } from './utils' 7 | const noopData = () => { return {} } 8 | const noopFetch = () => {} 9 | let _lastPaths = [] 10 | let _lastComponentsFiles = [] 11 | 12 | let app 13 | let router 14 | <%= (store ? 'let store' : '') %> 15 | 16 | console.log('foo') 17 | 18 | function mapTransitions(Components, to, from) { 19 | function componentTransitions(component) { 20 | if (!component || !component.options || !component.options.transition) { 21 | return {} 22 | } 23 | if(typeof component.options.transition === 'function') { 24 | return component.options.transition(to, from) 25 | } 26 | return component.options.transition 27 | } 28 | return Components.map((Component) => { 29 | // Clone original object to prevent overrides 30 | const transitions = Object.assign({}, componentTransitions(Component)) 31 | // Combine transitions & prefer *leave* transitions of 'from' route 32 | if(from && from.matched.length && from.matched[0].components.default) { 33 | const from_transitions = componentTransitions(from.matched[0].components.default) 34 | Object.keys(from_transitions) 35 | .filter(key => from_transitions[key] && key.toLowerCase().indexOf('leave') !== -1) 36 | .forEach(key => { transitions[key] = from_transitions[key] }) 37 | } 38 | return transitions 39 | }) 40 | } 41 | 42 | function loadAsyncComponents (to, from, next) { 43 | const resolveComponents = flatMapComponents(to, (Component, _, match, key) => { 44 | if (typeof Component === 'function' && !Component.options) { 45 | return new Promise(function (resolve, reject) { 46 | const _resolve = (Component) => { 47 | Component = sanitizeComponent(Component) 48 | match.components[key] = Component 49 | resolve(Component) 50 | } 51 | Component().then(_resolve).catch(reject) 52 | }) 53 | } 54 | Component = sanitizeComponent(Component) 55 | match.components[key] = Component 56 | return match.components[key] 57 | }) 58 | const fromPath = from.fullPath.split('#')[0] 59 | const toPath = to.fullPath.split('#')[0] 60 | this._hashChanged = (fromPath === toPath) 61 | if (!this._hashChanged) { 62 | <%= (loading ? 'this.$loading.start && this.$loading.start()' : '') %> 63 | } 64 | Promise.all(resolveComponents) 65 | .then(() => next()) 66 | .catch((err) => { 67 | let statusCode = err.statusCode || err.status || (err.response && err.response.status) || 500 68 | this.error({ statusCode, message: err.message }) 69 | next(false) 70 | }) 71 | } 72 | 73 | function callMiddleware (Components, context, layout) { 74 | // if layout is undefined, only call global middleware 75 | let midd = <%= serialize(router.middleware, { isJSON: true }) %> 76 | let unknownMiddleware = false 77 | if (typeof layout !== 'undefined') { 78 | midd = [] // exclude global middleware if layout defined (already called before) 79 | if (layout.middleware) { 80 | midd = midd.concat(layout.middleware) 81 | } 82 | Components.forEach((Component) => { 83 | if (Component.options.middleware) { 84 | midd = midd.concat(Component.options.middleware) 85 | } 86 | }) 87 | } 88 | midd = midd.map((name) => { 89 | if (typeof middleware[name] !== 'function') { 90 | unknownMiddleware = true 91 | this.error({ statusCode: 500, message: 'Unknown middleware ' + name }) 92 | } 93 | return middleware[name] 94 | }) 95 | if (unknownMiddleware) return 96 | return middlewareSeries(midd, context) 97 | } 98 | 99 | async function render (to, from, next) { 100 | if (this._hashChanged) return next() 101 | let layout 102 | let nextCalled = false 103 | const _next = function (path) { 104 | <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> 105 | if (nextCalled) return 106 | nextCalled = true 107 | next(path) 108 | } 109 | let context = getContext({ to<%= (store ? ', store' : '') %>, isClient: true, next: _next.bind(this), error: this.error.bind(this) }, app) 110 | let Components = getMatchedComponents(to) 111 | this._context = context 112 | this._dateLastError = this.$options._nuxt.dateErr 113 | this._hadError = !!this.$options._nuxt.err 114 | if (!Components.length) { 115 | // Default layout 116 | await callMiddleware.call(this, Components, context) 117 | if (context._redirected) return 118 | layout = await this.loadLayout(typeof NuxtError.layout === 'function' ? NuxtError.layout(context) : NuxtError.layout) 119 | await callMiddleware.call(this, Components, context, layout) 120 | if (context._redirected) return 121 | this.error({ statusCode: 404, message: 'This page could not be found.' }) 122 | return next() 123 | } 124 | // Update ._data and other properties if hot reloaded 125 | Components.forEach(function (Component) { 126 | if (Component._Ctor && Component._Ctor.options) { 127 | Component.options.asyncData = Component._Ctor.options.asyncData 128 | Component.options.fetch = Component._Ctor.options.fetch 129 | } 130 | }) 131 | this.setTransitions(mapTransitions(Components, to, from)) 132 | try { 133 | // Set layout 134 | await callMiddleware.call(this, Components, context) 135 | if (context._redirected) return 136 | layout = Components[0].options.layout 137 | if (typeof layout === 'function') { 138 | layout = layout(context) 139 | } 140 | layout = await this.loadLayout(layout) 141 | await callMiddleware.call(this, Components, context, layout) 142 | if (context._redirected) return 143 | // Pass validation? 144 | let isValid = true 145 | Components.forEach((Component) => { 146 | if (!isValid) return 147 | if (typeof Component.options.validate !== 'function') return 148 | isValid = Component.options.validate({ 149 | params: to.params || {}, 150 | query : to.query || {}<%= (store ? ', store: context.store' : '') %> 151 | }) 152 | }) 153 | if (!isValid) { 154 | this.error({ statusCode: 404, message: 'This page could not be found.' }) 155 | return next() 156 | } 157 | await Promise.all(Components.map((Component, i) => { 158 | // Check if only children route changed 159 | Component._path = compile(to.matched[i].path)(to.params) 160 | if (!this._hadError && Component._path === _lastPaths[i] && (i + 1) !== Components.length) { 161 | return Promise.resolve() 162 | } 163 | let promises = [] 164 | // asyncData method 165 | if (Component.options.asyncData && typeof Component.options.asyncData === 'function') { 166 | var promise = promisify(Component.options.asyncData, context) 167 | promise.then((asyncDataResult) => { 168 | applyAsyncData(Component, asyncDataResult) 169 | <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %> 170 | }) 171 | promises.push(promise) 172 | } 173 | if (Component.options.fetch) { 174 | var p = Component.options.fetch(context) 175 | if (!p || (!(p instanceof Promise) && (typeof p.then !== 'function'))) { p = Promise.resolve(p) } 176 | <%= (loading ? 'p.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %> 177 | promises.push(p) 178 | } 179 | return Promise.all(promises) 180 | })) 181 | _lastPaths = Components.map((Component, i) => compile(to.matched[i].path)(to.params)) 182 | <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> 183 | // If not redirected 184 | if (!nextCalled) { 185 | next() 186 | } 187 | } catch (error) { 188 | _lastPaths = [] 189 | error.statusCode = error.statusCode || error.status || (error.response && error.response.status) || 500 190 | let layout = NuxtError.layout 191 | if (typeof layout === 'function') { 192 | layout = layout(context) 193 | } 194 | this.loadLayout(layout) 195 | .then(() => { 196 | this.error(error) 197 | next(false) 198 | }) 199 | } 200 | } 201 | 202 | // Fix components format in matched, it's due to code-splitting of vue-router 203 | function normalizeComponents (to, ___) { 204 | flatMapComponents(to, (Component, _, match, key) => { 205 | if (typeof Component === 'object' && !Component.options) { 206 | // Updated via vue-router resolveAsyncComponents() 207 | Component = Vue.extend(Component) 208 | Component._Ctor = Component 209 | match.components[key] = Component 210 | } 211 | return Component 212 | }) 213 | } 214 | 215 | // When navigating on a different route but the same component is used, Vue.js 216 | // will not update the instance data, so we have to update $data ourselves 217 | function fixPrepatch (to, ___) { 218 | if (this._hashChanged) return 219 | Vue.nextTick(() => { 220 | let instances = getMatchedComponentsInstances(to) 221 | _lastComponentsFiles = instances.map((instance, i) => { 222 | if (!instance) return ''; 223 | if (_lastPaths[i] === instance.constructor._path && typeof instance.constructor.options.data === 'function') { 224 | let newData = instance.constructor.options.data.call(instance) 225 | for (let key in newData) { 226 | Vue.set(instance.$data, key, newData[key]) 227 | } 228 | } 229 | return instance.constructor.options.__file 230 | }) 231 | // hide error component if no error 232 | if (this._hadError && this._dateLastError === this.$options._nuxt.dateErr) { 233 | this.error() 234 | } 235 | // Set layout 236 | let layout = this.$options._nuxt.err ? NuxtError.layout : to.matched[0].components.default.options.layout 237 | if (typeof layout === 'function') { 238 | layout = layout(this._context) 239 | } 240 | this.setLayout(layout) 241 | // hot reloading 242 | setTimeout(() => hotReloadAPI(this), 100) 243 | }) 244 | } 245 | 246 | // Special hot reload with asyncData(context) 247 | function hotReloadAPI (_app) { 248 | if (!module.hot) return 249 | let $components = [] 250 | let $nuxt = _app.$nuxt 251 | while ($nuxt && $nuxt.$children && $nuxt.$children.length) { 252 | $nuxt.$children.forEach(function (child, i) { 253 | if (child.$vnode.data.nuxtChild) { 254 | let hasAlready = false 255 | $components.forEach(function (component) { 256 | if (component.$options.__file === child.$options.__file) { 257 | hasAlready = true 258 | } 259 | }) 260 | if (!hasAlready) { 261 | $components.push(child) 262 | } 263 | } 264 | $nuxt = child 265 | }) 266 | } 267 | $components.forEach(addHotReload.bind(_app)) 268 | } 269 | 270 | function addHotReload ($component, depth) { 271 | if ($component.$vnode.data._hasHotReload) return 272 | $component.$vnode.data._hasHotReload = true 273 | var _forceUpdate = $component.$forceUpdate.bind($component.$parent) 274 | $component.$vnode.context.$forceUpdate = () => { 275 | let Components = getMatchedComponents(router.currentRoute) 276 | let Component = Components[depth] 277 | if (!Component) return _forceUpdate() 278 | if (typeof Component === 'object' && !Component.options) { 279 | // Updated via vue-router resolveAsyncComponents() 280 | Component = Vue.extend(Component) 281 | Component._Ctor = Component 282 | } 283 | this.error() 284 | let promises = [] 285 | const next = function (path) { 286 | <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> 287 | router.push(path) 288 | } 289 | let context = getContext({ route: router.currentRoute<%= (store ? ', store' : '') %>, isClient: true, hotReload: true, next: next.bind(this), error: this.error }, app) 290 | <%= (loading ? 'this.$loading.start && this.$loading.start()' : '') %> 291 | callMiddleware.call(this, Components, context) 292 | .then(() => { 293 | // If layout changed 294 | if (depth !== 0) return Promise.resolve() 295 | let layout = Component.options.layout || 'default' 296 | if (typeof layout === 'function') { 297 | layout = layout(context) 298 | } 299 | if (this.layoutName === layout) return Promise.resolve() 300 | let promise = this.loadLayout(layout) 301 | promise.then(() => { 302 | this.setLayout(layout) 303 | Vue.nextTick(() => hotReloadAPI(this)) 304 | }) 305 | return promise 306 | }) 307 | .then(() => { 308 | return callMiddleware.call(this, Components, context, this.layout) 309 | }) 310 | .then(() => { 311 | // Call asyncData(context) 312 | let pAsyncData = promisify(Component.options.asyncData || noopData, context) 313 | pAsyncData.then((asyncDataResult) => { 314 | applyAsyncData(Component, asyncDataResult) 315 | <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %> 316 | }) 317 | promises.push(pAsyncData) 318 | // Call fetch() 319 | Component.options.fetch = Component.options.fetch || noopFetch 320 | let pFetch = Component.options.fetch(context) 321 | if (!pFetch || (!(pFetch instanceof Promise) && (typeof pFetch.then !== 'function'))) { pFetch = Promise.resolve(pFetch) } 322 | <%= (loading ? 'pFetch.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %> 323 | promises.push(pFetch) 324 | return Promise.all(promises) 325 | }) 326 | .then(() => { 327 | <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> 328 | _forceUpdate() 329 | setTimeout(() => hotReloadAPI(this), 100) 330 | }) 331 | } 332 | } 333 | 334 | // Load vue app 335 | const NUXT = window.__NUXT__ || {} 336 | if (!NUXT) { 337 | throw new Error('[nuxt.js] cannot find the global variable __NUXT__, make sure the server is working.') 338 | } 339 | // Get matched components 340 | const resolveComponents = function (router) { 341 | const path = getLocation(router.options.base) 342 | return flatMapComponents(router.match(path), (Component, _, match, key, index) => { 343 | if (typeof Component === 'function' && !Component.options) { 344 | return new Promise(function (resolve, reject) { 345 | const _resolve = (Component) => { 346 | Component = sanitizeComponent(Component) 347 | if (NUXT.serverRendered) { 348 | applyAsyncData(Component, NUXT.data[index]) 349 | } 350 | match.components[key] = Component 351 | resolve(Component) 352 | } 353 | Component().then(_resolve).catch(reject) 354 | }) 355 | } 356 | Component = sanitizeComponent(Component) 357 | match.components[key] = Component 358 | return Component 359 | }) 360 | } 361 | 362 | function nuxtReady (app) { 363 | window._nuxtReadyCbs.forEach((cb) => { 364 | if (typeof cb === 'function') { 365 | cb(app) 366 | } 367 | }) 368 | // Special JSDOM 369 | if (typeof window._onNuxtLoaded === 'function') { 370 | window._onNuxtLoaded(app) 371 | } 372 | // Add router hooks 373 | router.afterEach(function (to, from) { 374 | app.$nuxt.$emit('routeChanged', to, from) 375 | }) 376 | } 377 | 378 | createApp() 379 | .then(async (__app) => { 380 | app = __app.app 381 | router = __app.router 382 | <%= (store ? 'store = __app.store' : '') %> 383 | const Components = await Promise.all(resolveComponents(router)) 384 | const _app = new Vue(app) 385 | const layout = NUXT.layout || 'default' 386 | await _app.loadLayout(layout) 387 | _app.setLayout(layout) 388 | const mountApp = () => { 389 | _app.$mount('#__nuxt') 390 | Vue.nextTick(() => { 391 | // Hot reloading 392 | hotReloadAPI(_app) 393 | // Call window.onNuxtReady callbacks 394 | nuxtReady(_app) 395 | }) 396 | } 397 | _app.setTransitions = _app.$options._nuxt.setTransitions.bind(_app) 398 | if (Components.length) { 399 | _app.setTransitions(mapTransitions(Components, router.currentRoute)) 400 | _lastPaths = router.currentRoute.matched.map((route) => compile(route.path)(router.currentRoute.params)) 401 | _lastComponentsFiles = Components.map((Component) => Component.options.__file) 402 | } 403 | _app.error = _app.$options._nuxt.error.bind(_app) 404 | _app.$loading = {} // to avoid error while _app.$nuxt does not exist 405 | if (NUXT.error) _app.error(NUXT.error) 406 | // Add router hooks 407 | router.beforeEach(loadAsyncComponents.bind(_app)) 408 | router.beforeEach(render.bind(_app)) 409 | router.afterEach(normalizeComponents) 410 | router.afterEach(fixPrepatch.bind(_app)) 411 | if (NUXT.serverRendered) { 412 | mountApp() 413 | return 414 | } 415 | render.call(_app, router.currentRoute, router.currentRoute, function (path) { 416 | if (path) { 417 | let mounted = false 418 | router.afterEach(function () { 419 | if (mounted) return 420 | mounted = true 421 | mountApp() 422 | }) 423 | router.push(path) 424 | return 425 | } 426 | normalizeComponents(router.currentRoute, router.currentRoute) 427 | fixPrepatch.call(_app, router.currentRoute, router.currentRoute) 428 | mountApp() 429 | }) 430 | }) 431 | .catch((err) => { 432 | console.error('[nuxt.js] Cannot load components', err) // eslint-disable-line no-console 433 | }) 434 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 79 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 54 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | head: { 3 | title: 'starter', 4 | meta: [ 5 | { charset: 'utf-8' }, 6 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 7 | { hid: 'description', name: 'description', content: 'Nuxt.js project' } 8 | ], 9 | link: [ 10 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 11 | ] 12 | }, 13 | loading: { color: '#3B8070' }, 14 | 15 | build: { 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-test", 3 | "version": "1.0.1", 4 | "description": "Nuxt.js project", 5 | "author": "smith64fx ", 6 | "private": true, 7 | "dependencies": { 8 | "nuxt": "1.0.0-alpha.4" 9 | }, 10 | "scripts": { 11 | "dev": "nuxt", 12 | "build": "nuxt build", 13 | "start": "nuxt dev", 14 | "generate": "nuxt generate", 15 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 16 | "precommit": "npm run lint" 17 | }, 18 | "devDependencies": { 19 | "babel-eslint": "^7.1.1", 20 | "eslint": "^3.15.0", 21 | "eslint-config-standard": "^6.2.1", 22 | "eslint-loader": "^1.6.1", 23 | "eslint-plugin-html": "^2.0.0", 24 | "eslint-plugin-promise": "^3.4.1", 25 | "eslint-plugin-standard": "^2.0.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/pages/about.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 48 | 49 | 80 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/pages/index.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 48 | 49 | 80 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/pages/test.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 48 | 49 | 80 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-fixed-transition-modes/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/nuxt-fixed-transition-modes/static/favicon.ico -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | env: { 5 | browser: true, 6 | node: true 7 | }, 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | rules: {}, 15 | globals: {} 16 | } 17 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/README.md: -------------------------------------------------------------------------------- 1 | # nuxt-two 2 | 3 | > Nuxt.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm install # Or yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 23 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/assets/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */ 3 | background: #222; 4 | color: white; 5 | width: 100vw; 6 | height: 100vh; 7 | } 8 | 9 | a, a:visited { 10 | color: #3edada; 11 | text-decoration: none; 12 | } 13 | 14 | .container { 15 | padding: 60px; 16 | width: 100vw; 17 | height: 100vh; 18 | } 19 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/assets/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 2 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/components/Test.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 54 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | head: { 6 | title: 'starter', 7 | meta: [ 8 | { charset: 'utf-8' }, 9 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 10 | { hid: 'description', name: 'description', content: 'Nuxt.js project' } 11 | ], 12 | link: [ 13 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 14 | { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat:600|Rufina:700' } 15 | ] 16 | }, 17 | loading: false, 18 | css: ['assets/normalize.css', 'assets/main.css'], 19 | /* 20 | ** Build configuration 21 | */ 22 | build: { 23 | /* 24 | ** Run ESLINT on save 25 | */ 26 | extend (config, ctx) { 27 | if (ctx.isClient) { 28 | config.module.rules.push({ 29 | enforce: 'pre', 30 | test: /\.(js|vue)$/, 31 | loader: 'eslint-loader', 32 | exclude: /(node_modules)/ 33 | }) 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-two", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "dependencies": { 6 | "gsap": { 7 | "version": "1.19.1", 8 | "resolved": "https://registry.npmjs.org/gsap/-/gsap-1.19.1.tgz", 9 | "integrity": "sha1-SA0yDGYjN8JmP4Nrr0XpHqAktVM=" 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-two", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js project", 5 | "author": "Sarah Drasner ", 6 | "private": true, 7 | "dependencies": { 8 | "gsap": "^1.19.1", 9 | "nuxt": "latest" 10 | }, 11 | "scripts": { 12 | "dev": "nuxt", 13 | "build": "nuxt build", 14 | "start": "nuxt start", 15 | "generate": "nuxt generate", 16 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 17 | "precommit": "npm run lint" 18 | }, 19 | "devDependencies": { 20 | "babel-eslint": "^7.1.1", 21 | "eslint": "^3.15.0", 22 | "eslint-config-standard": "^6.2.1", 23 | "eslint-loader": "^1.6.1", 24 | "eslint-plugin-html": "^2.0.0", 25 | "eslint-plugin-promise": "^3.4.1", 26 | "eslint-plugin-standard": "^2.0.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/pages/contact.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 46 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/pages/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 42 | 43 | 48 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/pages/product.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 44 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/nuxt-js-animation-starter/static/favicon.ico -------------------------------------------------------------------------------- /vue2-resources/nuxt-js-animation-starter/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /vue2-resources/setup1/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue2-resources/setup1/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /vue2-resources/setup1/README.md: -------------------------------------------------------------------------------- 1 | # setup1 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue2-resources/setup1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | setup1 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vue2-resources/setup1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "setup1", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "Sarah Drasner ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.3.3" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-env": "^1.5.1", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "node-sass": "^4.13.1", 22 | "sass-loader": "^5.0.1", 23 | "vue-loader": "^12.1.0", 24 | "vue-template-compiler": "^2.3.3", 25 | "webpack": "^2.6.1", 26 | "webpack-dev-server": "^2.4.5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /vue2-resources/setup1/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 36 | 37 | 130 | -------------------------------------------------------------------------------- /vue2-resources/setup1/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/setup1/src/assets/logo.png -------------------------------------------------------------------------------- /vue2-resources/setup1/src/components/Child.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 25 | 26 | -------------------------------------------------------------------------------- /vue2-resources/setup1/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /vue2-resources/setup1/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 19 | // the "scss" and "sass" values for the lang attribute to the right configs here. 20 | // other preprocessors should work out of the box, no loader config like this necessary. 21 | 'scss': 'vue-style-loader!css-loader!sass-loader', 22 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 23 | } 24 | // other vue-loader options go here 25 | } 26 | }, 27 | { 28 | test: /\.js$/, 29 | loader: 'babel-loader', 30 | exclude: /node_modules/ 31 | }, 32 | { 33 | test: /\.(png|jpg|gif|svg)$/, 34 | loader: 'file-loader', 35 | options: { 36 | name: '[name].[ext]?[hash]' 37 | } 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | alias: { 43 | 'vue$': 'vue/dist/vue.esm.js' 44 | } 45 | }, 46 | devServer: { 47 | historyApiFallback: true, 48 | noInfo: true 49 | }, 50 | performance: { 51 | hints: false 52 | }, 53 | devtool: '#eval-source-map' 54 | } 55 | 56 | if (process.env.NODE_ENV === 'production') { 57 | module.exports.devtool = '#source-map' 58 | // http://vue-loader.vuejs.org/en/workflow/production.html 59 | module.exports.plugins = (module.exports.plugins || []).concat([ 60 | new webpack.DefinePlugin({ 61 | 'process.env': { 62 | NODE_ENV: '"production"' 63 | } 64 | }), 65 | new webpack.optimize.UglifyJsPlugin({ 66 | sourceMap: true, 67 | compress: { 68 | warnings: false 69 | } 70 | }), 71 | new webpack.LoaderOptionsPlugin({ 72 | minimize: true 73 | }) 74 | ]) 75 | } 76 | -------------------------------------------------------------------------------- /vue2-resources/setup2/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /vue2-resources/setup2/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | env: { 5 | browser: true, 6 | node: true 7 | }, 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | rules: {}, 15 | globals: {} 16 | } 17 | -------------------------------------------------------------------------------- /vue2-resources/setup2/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | -------------------------------------------------------------------------------- /vue2-resources/setup2/README.md: -------------------------------------------------------------------------------- 1 | # setup2 2 | 3 | > Nuxt.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm install # Or yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 23 | -------------------------------------------------------------------------------- /vue2-resources/setup2/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/setup2/components/Child.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 27 | 28 | -------------------------------------------------------------------------------- /vue2-resources/setup2/components/MainMenu.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 34 | 35 | 78 | -------------------------------------------------------------------------------- /vue2-resources/setup2/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /vue2-resources/setup2/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/setup2/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 131 | -------------------------------------------------------------------------------- /vue2-resources/setup2/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /vue2-resources/setup2/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | head: { 6 | title: 'starter', 7 | meta: [ 8 | { charset: 'utf-8' }, 9 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 10 | { hid: 'description', name: 'description', content: 'Nuxt.js project' } 11 | ], 12 | link: [ 13 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 14 | { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat|PT+Serif' } 15 | ] 16 | }, 17 | loading: false, 18 | /* 19 | ** Build configuration 20 | */ 21 | build: { 22 | //build code goes here, such as eslint etc 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /vue2-resources/setup2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "setup2", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js project", 5 | "author": "Sarah Drasner ", 6 | "private": true, 7 | "dependencies": { 8 | "nuxt": "latest" 9 | }, 10 | "scripts": { 11 | "dev": "nuxt", 12 | "build": "nuxt build", 13 | "start": "nuxt start", 14 | "generate": "nuxt generate", 15 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 16 | "precommit": "npm run lint" 17 | }, 18 | "devDependencies": { 19 | "babel-eslint": "^7.1.1", 20 | "eslint": "^3.15.0", 21 | "eslint-config-standard": "^6.2.1", 22 | "eslint-loader": "^1.6.1", 23 | "eslint-plugin-html": "^2.0.0", 24 | "eslint-plugin-promise": "^3.4.1", 25 | "eslint-plugin-standard": "^2.0.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /vue2-resources/setup2/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /vue2-resources/setup2/pages/cart.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 24 | 25 | -------------------------------------------------------------------------------- /vue2-resources/setup2/pages/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /vue2-resources/setup2/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /vue2-resources/setup2/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /vue2-resources/setup2/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/setup2/static/favicon.ico -------------------------------------------------------------------------------- /vue2-resources/setup2/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/README.md: -------------------------------------------------------------------------------- 1 | # vuex-example 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vuex-example 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuex-example", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "Sarah Drasner ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.3.3", 13 | "vuex": "^2.3.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-preset-env": "^1.5.1", 19 | "cross-env": "^3.0.0", 20 | "css-loader": "^0.25.0", 21 | "file-loader": "^0.9.0", 22 | "node-sass": "^4.13.1", 23 | "sass-loader": "^5.0.1", 24 | "vue-loader": "^12.1.0", 25 | "vue-template-compiler": "^2.3.3", 26 | "webpack": "^2.6.1", 27 | "webpack-dev-server": "^3.1.11" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 31 | 32 | 78 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vue2-resources/vuex-example/src/assets/logo.png -------------------------------------------------------------------------------- /vue2-resources/vuex-example/src/components/Action.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/src/components/AdjustState.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | 24 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/src/components/Getter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 17 | 18 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/src/components/Mutation.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import { store } from './store/store'; 5 | 6 | new Vue({ 7 | el: '#app', 8 | store, 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /vue2-resources/vuex-example/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | Vue.use(Vuex); 5 | 6 | export const store = new Vuex.Store({ 7 | state: { 8 | counter: 0 9 | }, 10 | //showing things, not mutating state 11 | getters: { 12 | tripleCounter: state => { 13 | return state.counter * 3; 14 | } 15 | }, 16 | //mutating the state 17 | //mutations are always synchronous 18 | mutations: { 19 | //showing passed with payload, represented as num 20 | increment: (state, num) => { 21 | state.counter += num; 22 | } 23 | }, 24 | //commits the mutation, it's asynchronous 25 | actions: { 26 | // showing passed with payload 27 | incrementAsync ({ commit }, num) { 28 | setTimeout(() => { 29 | commit('increment', num) 30 | }, 1000) 31 | } 32 | } 33 | }); -------------------------------------------------------------------------------- /vue2-resources/vuex-example/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 19 | // the "scss" and "sass" values for the lang attribute to the right configs here. 20 | // other preprocessors should work out of the box, no loader config like this necessary. 21 | 'scss': 'vue-style-loader!css-loader!sass-loader', 22 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 23 | } 24 | // other vue-loader options go here 25 | } 26 | }, 27 | { 28 | test: /\.js$/, 29 | loader: 'babel-loader', 30 | exclude: /node_modules/ 31 | }, 32 | { 33 | test: /\.(png|jpg|gif|svg)$/, 34 | loader: 'file-loader', 35 | options: { 36 | name: '[name].[ext]?[hash]' 37 | } 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | alias: { 43 | 'vue$': 'vue/dist/vue.esm.js' 44 | } 45 | }, 46 | devServer: { 47 | historyApiFallback: true, 48 | noInfo: true 49 | }, 50 | performance: { 51 | hints: false 52 | }, 53 | devtool: '#eval-source-map' 54 | } 55 | 56 | if (process.env.NODE_ENV === 'production') { 57 | module.exports.devtool = '#source-map' 58 | // http://vue-loader.vuejs.org/en/workflow/production.html 59 | module.exports.plugins = (module.exports.plugins || []).concat([ 60 | new webpack.DefinePlugin({ 61 | 'process.env': { 62 | NODE_ENV: '"production"' 63 | } 64 | }), 65 | new webpack.optimize.UglifyJsPlugin({ 66 | sourceMap: true, 67 | compress: { 68 | warnings: false 69 | } 70 | }), 71 | new webpack.LoaderOptionsPlugin({ 72 | minimize: true 73 | }) 74 | ]) 75 | } 76 | -------------------------------------------------------------------------------- /vuex-example/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /vuex-example/README.md: -------------------------------------------------------------------------------- 1 | # vuex-example 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /vuex-example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vuex-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuex-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "vue": "^2.6.11", 12 | "vuex": "^3.4.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^4.4.0", 16 | "@vue/cli-service": "^4.4.0", 17 | "node-sass": "^4.12.0", 18 | "sass-loader": "^8.0.2", 19 | "vue-template-compiler": "^2.6.11" 20 | }, 21 | "browserslist": [ 22 | "> 1%", 23 | "last 2 versions", 24 | "not dead" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /vuex-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vuex-example/public/favicon.ico -------------------------------------------------------------------------------- /vuex-example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vuex-example/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | 29 | 44 | -------------------------------------------------------------------------------- /vuex-example/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/intro-to-vue/7c695d35f094b0ff6c74b447cb65803f5a03f6a1/vuex-example/src/assets/logo.png -------------------------------------------------------------------------------- /vuex-example/src/components/AppAction.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /vuex-example/src/components/AppGetter.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /vuex-example/src/components/AppMutation.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /vuex-example/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import store from './store' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | store, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /vuex-example/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | import Vuex from "vuex" 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | counter: 0, 9 | }, 10 | // showing things, not mutating state, like computed 11 | getters: { 12 | tripleCounter: (state) => { 13 | return state.counter * 3 14 | }, 15 | }, 16 | // mutating the state 17 | // mutations are always synchronous 18 | mutations: { 19 | // showing passed with payload, in this case num 20 | increment: (state, num) => { 21 | state.counter += num 22 | }, 23 | }, 24 | // commits the mutation, it's asynchronous 25 | // this is where you'll call APIs 26 | actions: { 27 | // showing passed with payload. 28 | // If we need more than one value, we would pass in an object 29 | incrementAsync({ commit }, num) { 30 | setTimeout(() => { 31 | // we are committing the mutation of increment here 32 | commit("increment", num) 33 | }, 1000) 34 | }, 35 | }, 36 | }) 37 | --------------------------------------------------------------------------------