├── vue-http
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── babel.config.js
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── mixins
    │   │   └── counter.js
    │   ├── components
    │   │   ├── HoverCounter.vue
    │   │   ├── ClickCounter.vue
    │   │   ├── TemplateRef.vue
    │   │   ├── Child.vue
    │   │   ├── Parent.vue
    │   │   ├── PostList.vue
    │   │   └── CreatePost.vue
    │   └── App.vue
    ├── .gitignore
    ├── README.md
    └── package.json
├── hello-world
    ├── babel.config.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   └── App.vue
    ├── .gitignore
    ├── README.md
    └── package.json
├── vue-components
    ├── babel.config.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── components
    │   │   ├── TabA.vue
    │   │   ├── TabB.vue
    │   │   ├── Portal.vue
    │   │   ├── ChildStyles.vue
    │   │   ├── Greet.vue
    │   │   ├── ComponentF.vue
    │   │   ├── TabC.vue
    │   │   ├── ComponentC.vue
    │   │   ├── ComponentE.vue
    │   │   ├── Article.vue
    │   │   ├── Popup.vue
    │   │   ├── Input.vue
    │   │   ├── NameList.vue
    │   │   └── Card.vue
    │   └── App.vue
    ├── .gitignore
    ├── README.md
    └── package.json
├── vue-composition
    ├── babel.config.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── mixins
    │   │   └── counter.js
    │   ├── components
    │   │   ├── ChildA.vue
    │   │   ├── ChildB.vue
    │   │   ├── DemoOne.vue
    │   │   ├── TemplateRef.vue
    │   │   ├── DemoTwo.vue
    │   │   ├── HoverCounter.vue
    │   │   ├── ClickCounter.vue
    │   │   ├── LifecycleO.vue
    │   │   ├── PersonGreeting.vue
    │   │   ├── Person.vue
    │   │   ├── LifecycleC.vue
    │   │   ├── ChildC.vue
    │   │   ├── VModel.vue
    │   │   ├── Methods.vue
    │   │   ├── ProvideInject.vue
    │   │   ├── Data.vue
    │   │   ├── Computed.vue
    │   │   └── Watch.vue
    │   ├── composables
    │   │   └── useCounter.js
    │   └── App.vue
    ├── .gitignore
    ├── README.md
    └── package.json
└── vue-fundamentals
    ├── babel.config.js
    ├── public
        ├── favicon.ico
        └── index.html
    ├── src
        ├── assets
        │   └── logo.png
        ├── main.js
        └── App.vue
    ├── .gitignore
    ├── README.md
    └── package.json


/vue-http/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/vue-http/public/favicon.ico


--------------------------------------------------------------------------------
/vue-http/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue-http/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/vue-http/src/assets/logo.png


--------------------------------------------------------------------------------
/hello-world/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/hello-world/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/hello-world/public/favicon.ico


--------------------------------------------------------------------------------
/hello-world/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/hello-world/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-components/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue-components/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/vue-components/public/favicon.ico


--------------------------------------------------------------------------------
/vue-components/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/vue-components/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-composition/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue-composition/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/vue-composition/public/favicon.ico


--------------------------------------------------------------------------------
/vue-fundamentals/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue-http/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/hello-world/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/vue-components/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/vue-composition/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/vue-composition/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-composition/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/vue-fundamentals/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/vue-fundamentals/public/favicon.ico


--------------------------------------------------------------------------------
/vue-fundamentals/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gopinav/Vue-3-Tutorials/HEAD/vue-fundamentals/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-fundamentals/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/vue-components/src/components/TabA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Tab A Content</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'TabA',
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/TabB.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Tab B Content</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'TabB',
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Portal Component</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'Portal',
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | </style>


--------------------------------------------------------------------------------
/vue-http/src/mixins/counter.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   data() {
 3 |     return {
 4 |       count: 0
 5 |     }
 6 |   },
 7 |   methods: {
 8 |     incrementCount() {
 9 |       this.count += 1
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/vue-composition/src/mixins/counter.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   data() {
 3 |     return {
 4 |       count: 0
 5 |     }
 6 |   },
 7 |   methods: {
 8 |     incrementCount() {
 9 |       this.count += 1
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/vue-components/src/components/ChildStyles.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <slot></slot>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'ChildStyles',
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | h4 {
13 |   color: olivedrab;
14 | }
15 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/Greet.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Hello {{ name }} a.k.a {{ heroName }}</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'Greet',
 8 |   props: ['name', 'heroName'],
 9 | }
10 | </script>
11 | 
12 | <style scoped>
13 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/ComponentF.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Component F</h2>
 3 |   <h3>Component F username - {{ userName }}</h3>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   name: 'ComponentF',
 9 |   inject: ['userName'],
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/ChildA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Child Component A</h2>
 3 |   <ChildB />
 4 | </template>
 5 | 
 6 | <script>
 7 | import ChildB from './ChildB'
 8 | export default {
 9 |   name: 'ChildA',
10 |   components: {
11 |     ChildB,
12 |   },
13 | }
14 | </script>
15 | 
16 | <style scoped>
17 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/ChildB.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Child Component B</h2>
 3 |   <ChildC />
 4 | </template>
 5 | 
 6 | <script>
 7 | import ChildC from './ChildC'
 8 | export default {
 9 |   name: 'ChildB',
10 |   components: {
11 |     ChildC,
12 |   },
13 | }
14 | </script>
15 | 
16 | <style scoped>
17 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/TabC.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Tab C Content</div>
 3 |   <input type="text" v-model="name" />
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   name: 'TabC',
 9 |   data() {
10 |     return {
11 |       name: '',
12 |     }
13 |   },
14 | }
15 | </script>
16 | 
17 | <style scoped>
18 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/ComponentC.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Component C</h2>
 3 |   <ComponentE />
 4 | </template>
 5 | 
 6 | <script>
 7 | import ComponentE from './ComponentE'
 8 | export default {
 9 |   name: 'ComponentC',
10 |   components: {
11 |     ComponentE,
12 |   },
13 | }
14 | </script>
15 | 
16 | <style scoped>
17 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/ComponentE.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Component E</h2>
 3 |   <ComponentF />
 4 | </template>
 5 | 
 6 | <script>
 7 | import ComponentF from './ComponentF'
 8 | export default {
 9 |   name: 'ComponentE',
10 |   components: {
11 |     ComponentF,
12 |   },
13 | }
14 | </script>
15 | 
16 | <style scoped>
17 | </style>


--------------------------------------------------------------------------------
/vue-http/.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 | 


--------------------------------------------------------------------------------
/hello-world/.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 | 


--------------------------------------------------------------------------------
/vue-components/.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 | 


--------------------------------------------------------------------------------
/vue-composition/.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 | 


--------------------------------------------------------------------------------
/vue-composition/src/composables/useCounter.js:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | 
 3 | function useCounter(initialCount = 0, stepSize = 1) {
 4 |   const count = ref(initialCount)
 5 |   function incrementCount() {
 6 |     count.value += stepSize
 7 |   }
 8 | 
 9 |   return {
10 |     count,
11 |     incrementCount
12 |   }
13 | }
14 | 
15 | export default useCounter
16 | 


--------------------------------------------------------------------------------
/vue-fundamentals/.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 | 


--------------------------------------------------------------------------------
/vue-http/src/components/HoverCounter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2 @mouseover="incrementCount">Hovered {{ count }} times</h2>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import CounterMixin from '../mixins/counter'
 9 | export default {
10 |   name: 'HoverCounter',
11 |   mixins: [CounterMixin],
12 | }
13 | </script>
14 | 
15 | <style scoped>
16 | </style>


--------------------------------------------------------------------------------
/vue-http/README.md:
--------------------------------------------------------------------------------
 1 | # vue-http
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/hello-world/README.md:
--------------------------------------------------------------------------------
 1 | # hello-world
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/vue-composition/src/components/DemoOne.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>{{ name }}</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { ref } from 'vue'
 7 | export default {
 8 |   name: 'DemoOne',
 9 |   setup() {
10 |     const name = ref('Vishwas')
11 | 
12 |     setTimeout(() => {
13 |       name.value = 'Codevolution'
14 |     }, 2000)
15 |     return {
16 |       name,
17 |     }
18 |   },
19 | }
20 | </script>
21 | 
22 | <style scoped>
23 | </style>


--------------------------------------------------------------------------------
/hello-world/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Hello</div>
 3 |   <div>World</div>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   name: 'App',
 9 | }
10 | </script>
11 | 
12 | <style>
13 | #app {
14 |   font-family: Avenir, Helvetica, Arial, sans-serif;
15 |   -webkit-font-smoothing: antialiased;
16 |   -moz-osx-font-smoothing: grayscale;
17 |   text-align: center;
18 |   color: #2c3e50;
19 |   margin-top: 60px;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/vue-components/README.md:
--------------------------------------------------------------------------------
 1 | # vue-components
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/vue-http/src/components/ClickCounter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="incrementCount">Clicked {{ count }} times</button>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import CounterMixin from '../mixins/counter'
 9 | export default {
10 |   name: 'ClickCounter',
11 |   mixins: [CounterMixin],
12 |   data() {
13 |     return {
14 |       count: 100,
15 |     }
16 |   },
17 | }
18 | </script>
19 | 
20 | <style scoped>
21 | </style>


--------------------------------------------------------------------------------
/vue-composition/README.md:
--------------------------------------------------------------------------------
 1 | # vue-composition
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/vue-fundamentals/README.md:
--------------------------------------------------------------------------------
 1 | # vue-fundamentals
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/vue-http/src/components/TemplateRef.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <input type="text" ref="inputRef" />
 4 |     <PostList ref="postListRef" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import PostList from './PostList.vue'
10 | export default {
11 |   name: 'TemplateRef',
12 |   components: {
13 |     PostList,
14 |   },
15 |   mounted() {
16 |     console.log(this.$refs.postListRef)
17 |     this.$refs.inputRef.focus()
18 |   },
19 | }
20 | </script>
21 | 
22 | <style scoped>
23 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/TemplateRef.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <input type="text" ref="inputRef" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { ref, onMounted } from 'vue'
 9 | export default {
10 |   name: 'TemplateRef',
11 |   setup() {
12 |     const inputRef = ref(null)
13 | 
14 |     onMounted(() => {
15 |       inputRef.value.focus()
16 |     })
17 | 
18 |     return {
19 |       inputRef,
20 |     }
21 |   },
22 |   //   mounted() {
23 |   //     this.$refs.inputRef.focus()
24 |   //   },
25 | }
26 | </script>
27 | 
28 | <style scoped>
29 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/DemoTwo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>{{ firstName }} {{ lastName }}</h2>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { reactive, toRefs } from 'vue'
 7 | export default {
 8 |   name: 'DemoTwo',
 9 |   setup() {
10 |     const state = reactive({
11 |       firstName: 'Bruce',
12 |       lastName: 'Wayne',
13 |     })
14 | 
15 |     setTimeout(() => {
16 |       state.firstName = 'Clark'
17 |       state.lastName = 'Kent'
18 |       console.log(state)
19 |     }, 2000)
20 |     return toRefs(state)
21 |   },
22 | }
23 | </script>
24 | 
25 | <style scoped>
26 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/HoverCounter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2 @mouseover="incrementCount">Hovered {{ count }} times</h2>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import useCounter from '../composables/useCounter'
 9 | 
10 | // import CounterMixin from '../mixins/counter'
11 | export default {
12 |   name: 'HoverCounter',
13 |   setup() {
14 |     const { count, incrementCount } = useCounter()
15 |     return {
16 |       count,
17 |       incrementCount,
18 |     }
19 |   },
20 |   // mixins: [CounterMixin],
21 | }
22 | </script>
23 | 
24 | <style scoped>
25 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/ClickCounter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="incrementCount">Clicked {{ count }} times</button>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import useCounter from '../composables/useCounter'
 9 | // import CounterMixin from '../mixins/counter'
10 | export default {
11 |   name: 'ClickCounter',
12 |   setup() {
13 |     const { count, incrementCount } = useCounter(100, 10)
14 |     return {
15 |       count,
16 |       incrementCount,
17 |     }
18 |   },
19 |   // mixins: [CounterMixin],
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/Article.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2 v-bind="$attrs">{{ title }}</h2>
 4 |     <h2>Likes - {{ likes }}</h2>
 5 |     <h2>Published - {{ isPublished ? 'Yes' : 'No' }}</h2>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'Article',
12 |   props: {
13 |     title: {
14 |       type: String,
15 |       required: true,
16 |       default: 'Article default title',
17 |     },
18 |     likes: Number,
19 |     isPublished: {
20 |       type: Boolean,
21 |       required: true,
22 |     },
23 |   },
24 |   inheritAttrs: false,
25 | }
26 | </script>
27 | 
28 | <style scoped>
29 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/Popup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>This is a popup</h2>
 4 |     <input type="text" v-model="name" />
 5 |     <button @click="$emit('close', name)">Close Popup</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'Popup',
12 |   data() {
13 |     return {
14 |       name: '',
15 |     }
16 |   },
17 |   emits: {
18 |     close: (name) => {
19 |       if (!name) {
20 |         console.warn('Invalid submit event payload!')
21 |         return false
22 |       } else {
23 |         return true
24 |       }
25 |     },
26 |   },
27 | }
28 | </script>
29 | 
30 | <style scoped>
31 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input
 3 |     type="text"
 4 |     :value="modelValue"
 5 |     @input="$emit('update:modelValue', $event.target.value)"
 6 |   />
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'Input',
12 |   props: {
13 |     modelValue: String,
14 |   },
15 |   emits: ['update:modelValue'],
16 | }
17 | </script>
18 | 
19 | <style scoped>
20 | input[type='text'] {
21 |   display: block;
22 |   width: 400px;
23 |   padding: 6px 12px;
24 |   font-size: 14px;
25 |   line-height: 1.4;
26 |   color: #555;
27 |   background-color: #fff;
28 |   background-image: none;
29 |   border: 1px solid #ccc;
30 |   border-radius: 4px;
31 | }
32 | </style>


--------------------------------------------------------------------------------
/vue-http/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/hello-world/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue-composition/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue-fundamentals/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue-components/src/components/NameList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h3 v-for="name in names" :key="name.firstName">
 3 |     <slot :firstName="name.firstName" :lastName="name.lastName"></slot>
 4 |   </h3>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'NameList',
10 |   data() {
11 |     return {
12 |       names: [
13 |         {
14 |           firstName: 'Bruce',
15 |           lastName: 'Wayne',
16 |         },
17 |         {
18 |           firstName: 'Clark',
19 |           lastName: 'Kent',
20 |         },
21 |         {
22 |           firstName: 'Princess',
23 |           lastName: 'Diana',
24 |         },
25 |       ],
26 |     }
27 |   },
28 | }
29 | </script>
30 | 
31 | <style scoped>
32 | </style>


--------------------------------------------------------------------------------
/vue-components/src/components/Card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card">
 3 |     <div id="card-header">
 4 |       <slot name="header"></slot>
 5 |     </div>
 6 |     <div id="card-content">
 7 |       <slot>Default Content</slot>
 8 |     </div>
 9 |     <div id="card-footer">
10 |       <slot name="footer"></slot>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: 'Card',
18 | }
19 | </script>
20 | 
21 | <style scoped>
22 | .card {
23 |   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
24 |   transition: 0.3s;
25 |   padding: 16px;
26 |   margin-bottom: 20px;
27 |   width: 200px;
28 | }
29 | 
30 | .card:hover {
31 |   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
32 | }
33 | </style>


--------------------------------------------------------------------------------
/vue-components/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <div id="portal-root"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/vue-http/src/components/Child.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Child component</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'Child',
 8 |   beforeCreate() {
 9 |     console.log('Child beforeCreate()')
10 |   },
11 |   created() {
12 |     console.log('Child created()')
13 |   },
14 |   beforeMount() {
15 |     console.log('Child beforeMount()')
16 |   },
17 |   mounted() {
18 |     console.log('Child mounted()')
19 |   },
20 |   beforeUpdate() {
21 |     console.log('Child beforeUpdate()')
22 |   },
23 |   updated() {
24 |     console.log('Child updated()')
25 |   },
26 |   beforeUnmount() {
27 |     console.log('Child beforeUnmount()')
28 |   },
29 |   unmounted() {
30 |     console.log('Child unmounted()')
31 |   },
32 | }
33 | </script>
34 | 
35 | <style scoped>
36 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/LifecycleO.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Options API Lifecycle Hooks</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'LifeCycleO',
 8 |   beforeCreate() {
 9 |     console.log('LifeCycleO beforeCreate()')
10 |   },
11 |   created() {
12 |     console.log('LifeCycleO created()')
13 |   },
14 |   beforeMount() {
15 |     console.log('LifeCycleO beforeMount()')
16 |   },
17 |   mounted() {
18 |     console.log('LifeCycleO mounted()')
19 |   },
20 |   beforeUpdate() {
21 |     console.log('LifeCycleO beforeUpdate()')
22 |   },
23 |   updated() {
24 |     console.log('LifeCycleO updated()')
25 |   },
26 |   beforeUnmount() {
27 |     console.log('LifeCycleO beforeUnmount()')
28 |   },
29 |   unmounted() {
30 |     console.log('LifeCycleO unmounted()')
31 |   },
32 | }
33 | </script>
34 | 
35 | <style scoped>
36 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/PersonGreeting.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Hello {{ fullName }}</div>
 3 |   <button @click="sendEvent">Call Justice League</button>
 4 | </template>
 5 | 
 6 | <script>
 7 | import { computed } from 'vue'
 8 | export default {
 9 |   name: 'PersonGreeting',
10 |   props: ['firstName', 'lastName'],
11 |   emits: ['callHeroes'],
12 |   setup(props, context) {
13 |     const fullName = computed(() => {
14 |       return `${props.firstName} ${props.lastName}`
15 |     })
16 | 
17 |     function sendEvent() {
18 |       context.emit('callHeroes', fullName.value)
19 |     }
20 | 
21 |     return {
22 |       fullName,
23 |       sendEvent,
24 |     }
25 |   },
26 |   // computed: {
27 |   //   fullName() {
28 |   //     return `${this.firstName} ${this.lastName}`
29 |   //   },
30 |   // },
31 | }
32 | </script>
33 | 
34 | <style scoped>
35 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/Person.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <input type="text" placeholder="First Name" v-model="firstName" />
 4 |     <input type="text" placeholder="Last Name" v-model="lastName" />
 5 |   </div>
 6 |   <PersonGreeting
 7 |     :firstName="firstName"
 8 |     :lastName="lastName"
 9 |     @callHeroes="callHeroes"
10 |   />
11 | </template>
12 | 
13 | <script>
14 | import { ref } from 'vue'
15 | import PersonGreeting from './PersonGreeting.vue'
16 | export default {
17 |   name: 'Person',
18 |   components: {
19 |     PersonGreeting,
20 |   },
21 |   setup() {
22 |     const firstName = ref('')
23 |     const lastName = ref('')
24 | 
25 |     function callHeroes(hero) {
26 |       alert(`Calling ${hero}`)
27 |     }
28 | 
29 |     return {
30 |       firstName,
31 |       lastName,
32 |       callHeroes,
33 |     }
34 |   },
35 | }
36 | </script>
37 | 
38 | <style scoped>
39 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/LifecycleC.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Composition API Lifecycle Hooks</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import {
 7 |   onBeforeMount,
 8 |   onMounted,
 9 |   onBeforeUpdate,
10 |   onUpdated,
11 |   onBeforeUnmount,
12 |   onUnmounted,
13 | } from 'vue'
14 | export default {
15 |   name: 'LifecycleC',
16 |   setup() {
17 |     onBeforeMount(() => {
18 |       console.log('LifeCycleC onBeforeMount()')
19 |     })
20 |     onMounted(() => {
21 |       console.log('LifeCycleC onMounted()')
22 |     })
23 |     onBeforeUpdate(() => {
24 |       console.log('LifeCycleC onBeforeUpdate()')
25 |     })
26 |     onUpdated(() => {
27 |       console.log('LifeCycleC onUpdated()')
28 |     })
29 |     onBeforeUnmount(() => {
30 |       console.log('LifeCycleC onBeforeUnmount()')
31 |     })
32 |     onUnmounted(() => {
33 |       console.log('LifeCycleC onUnmounted()')
34 |     })
35 |   },
36 | }
37 | </script>
38 | 
39 | <style scoped>
40 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/ChildC.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Child Component C</h2>
 3 |   <h3>Child Component C username - {{ userName }}</h3>
 4 |   <h3>Child Component C composition username - {{ childUserName }}</h3>
 5 |   <h3>Child Component C count - {{ childCount }}</h3>
 6 |   <h3>Child Component C hero - {{ firstName }} {{ lastName }}</h3>
 7 |   <button @click="incrementCount">Increment count from child</button>
 8 | </template>
 9 | 
10 | <script>
11 | import { inject, toRefs } from 'vue'
12 | export default {
13 |   name: 'ChildC',
14 |   setup() {
15 |     const childUserName = inject('c_userName', 'Default username')
16 |     const childCount = inject('c_count', 0)
17 |     const childHero = inject('c_hero', {})
18 |     const incrementCount = inject('incrementCount')
19 | 
20 |     return {
21 |       childUserName,
22 |       childCount,
23 |       ...toRefs(childHero),
24 |       incrementCount,
25 |     }
26 |   },
27 |   inject: ['userName'],
28 | }
29 | </script>
30 | 
31 | <style scoped>
32 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/VModel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- Options API -->
 4 |     <input type="text" placeholder="First Name" v-model="fName" />
 5 |     <input type="text" placeholder="Last Name" v-model="lName" />
 6 | 
 7 |     <!-- ref -->
 8 |     <input type="text" placeholder="Hero Name" v-model="heroName" />
 9 | 
10 |     <!-- reactive -->
11 |     <input type="text" placeholder="First Name" v-model="firstName" />
12 |     <input type="text" placeholder="Last Name" v-model="lastName" />
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { ref, reactive, toRefs } from 'vue'
18 | export default {
19 |   name: 'VModel',
20 |   setup() {
21 |     const heroName = ref('')
22 |     const state = reactive({
23 |       firstName: '',
24 |       lastName: '',
25 |     })
26 | 
27 |     return {
28 |       heroName,
29 |       ...toRefs(state),
30 |     }
31 |   },
32 |   data() {
33 |     return {
34 |       fName: '',
35 |       lName: '',
36 |     }
37 |   },
38 | }
39 | </script>
40 | 
41 | <style scoped>
42 | </style>


--------------------------------------------------------------------------------
/vue-http/src/components/Parent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     Parent component
 4 |     <button @click="showChild = !showChild">Toggle Child</button>
 5 |     <Child v-if="showChild" />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Child from './Child.vue'
11 | export default {
12 |   components: { Child },
13 |   name: 'Parent',
14 |   data() {
15 |     return {
16 |       showChild: true,
17 |     }
18 |   },
19 |   beforeCreate() {
20 |     console.log('Parent beforeCreate()')
21 |   },
22 |   created() {
23 |     console.log('Parent created()')
24 |   },
25 |   beforeMount() {
26 |     console.log('Parent beforeMount()')
27 |   },
28 |   mounted() {
29 |     console.log('Parent mounted()')
30 |   },
31 |   beforeUpdate() {
32 |     console.log('Parent beforeUpdate()')
33 |   },
34 |   updated() {
35 |     console.log('Parent updated()')
36 |   },
37 |   beforeUnmount() {
38 |     console.log('Parent beforeUnmount()')
39 |   },
40 |   unmounted() {
41 |     console.log('Parent unmounted()')
42 |   },
43 | }
44 | </script>
45 | 
46 | <style scoped>
47 | </style>


--------------------------------------------------------------------------------
/vue-http/src/components/PostList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- <button @click="getPosts">Load Posts</button> -->
 4 |     <div v-for="post in posts" :key="post.id">
 5 |       <h3>{{ post.id }}. {{ post.title }}</h3>
 6 |       <p>{{ post.body }}</p>
 7 |       <hr />
 8 |     </div>
 9 |     <h3 v-if="errorMsg">{{ errorMsg }}</h3>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import axios from 'axios'
15 | 
16 | export default {
17 |   name: 'PostList',
18 |   created() {
19 |     this.getPosts()
20 |   },
21 |   data() {
22 |     return {
23 |       posts: [],
24 |       errorMsg: '',
25 |     }
26 |   },
27 |   methods: {
28 |     getPosts() {
29 |       axios
30 |         .get('https://jsonplaceholder.typicode.com/posts')
31 |         .then((response) => {
32 |           console.log(response)
33 |           this.posts = response.data
34 |         })
35 |         .catch((error) => {
36 |           console.log(error)
37 |           this.errorMsg = 'Error retrieving data'
38 |         })
39 |     },
40 |   },
41 | }
42 | </script>
43 | 
44 | <style scoped>
45 | </style>


--------------------------------------------------------------------------------
/vue-http/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CreatePost />
 3 |   <PostList />
 4 | 
 5 |   <!-- Lifecycle Hooks -->
 6 |   <Parent />
 7 | 
 8 |   <!-- Template Refs -->
 9 |   <TemplateRef />
10 | 
11 |   <!-- mixinx -->
12 |   <ClickCounter />
13 |   <HoverCounter />
14 | </template>
15 | 
16 | <script>
17 | import CreatePost from './components/CreatePost'
18 | import PostList from './components/PostList'
19 | import Parent from './components/Parent.vue'
20 | import TemplateRef from './components/TemplateRef.vue'
21 | import ClickCounter from './components/ClickCounter.vue'
22 | import HoverCounter from './components/HoverCounter.vue'
23 | export default {
24 |   name: 'App',
25 |   components: {
26 |     PostList,
27 |     CreatePost,
28 |     Parent,
29 |     TemplateRef,
30 |     ClickCounter,
31 |     HoverCounter,
32 |   },
33 | }
34 | </script>
35 | 
36 | <style>
37 | #app {
38 |   font-family: Avenir, Helvetica, Arial, sans-serif;
39 |   -webkit-font-smoothing: antialiased;
40 |   -moz-osx-font-smoothing: grayscale;
41 |   text-align: center;
42 |   color: #2c3e50;
43 |   margin-top: 60px;
44 | }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/hello-world/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hello-world",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^7.0.0-0"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "prettier": {
38 |     "semi": false,
39 |     "singleQuote": true
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions",
44 |     "not dead"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/vue-components/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-components",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^7.0.0-0"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "prettier": {
38 |     "semi": false,
39 |     "singleQuote": true
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions",
44 |     "not dead"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/vue-fundamentals/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-fundamentals",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^7.0.0-0"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "prettier": {
38 |     "semi": false,
39 |     "singleQuote": true
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions",
44 |     "not dead"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/vue-http/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-http",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^3.0.0"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "@vue/compiler-sfc": "^3.0.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^7.0.0-0"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/vue3-essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "prettier": {
39 |     "semi": false,
40 |     "singleQuote": true
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not dead"
46 |   ]
47 | }
48 | 


--------------------------------------------------------------------------------
/vue-composition/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-composition",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "lodash": "^4.17.20",
13 |     "vue": "^3.0.0"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "@vue/compiler-sfc": "^3.0.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^7.0.0-0"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/vue3-essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "prettier": {
39 |     "semi": false,
40 |     "singleQuote": true
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not dead"
46 |   ]
47 | }
48 | 


--------------------------------------------------------------------------------
/vue-composition/src/components/Methods.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- Options API -->
 3 |   <h2>{{ name }}</h2>
 4 |   <button @click="setName">Set Name</button>
 5 | 
 6 |   <!-- ref -->
 7 |   <h2>{{ count }}</h2>
 8 |   <button @click="incrementCount">Increment Count</button>
 9 | 
10 |   <!-- reactive -->
11 |   <h2>{{ first }} {{ last }}</h2>
12 |   <button @click="changeHero">Change Hero</button>
13 | </template>
14 | 
15 | <script>
16 | import { ref, reactive, toRefs } from 'vue'
17 | export default {
18 |   name: 'Methods',
19 |   setup() {
20 |     const count = ref(0)
21 |     function incrementCount() {
22 |       count.value++
23 |     }
24 | 
25 |     const state = reactive({
26 |       first: 'Bruce',
27 |       last: 'Wayne',
28 |     })
29 |     function changeHero() {
30 |       state.first = 'Clark'
31 |       state.last = 'Kent'
32 |     }
33 | 
34 |     return {
35 |       count,
36 |       incrementCount,
37 |       ...toRefs(state),
38 |       changeHero,
39 |     }
40 |   },
41 |   data() {
42 |     return {
43 |       name: 'Vishwas',
44 |     }
45 |   },
46 |   methods: {
47 |     setName() {
48 |       this.name = 'Codevolution'
49 |     },
50 |   },
51 | }
52 | </script>
53 | 
54 | <style scoped>
55 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/ProvideInject.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h3>Parent component {{ name }}</h3>
 3 |   <h3>Parent component {{ count }}</h3>
 4 |   <h3>Parent component {{ firstName }} {{ lastName }}</h3>
 5 |   <button @click="incrementCount">Increment count</button>
 6 |   <ChildA />
 7 | </template>
 8 | 
 9 | <script>
10 | import { provide, ref, reactive, toRefs } from 'vue'
11 | import ChildA from './ChildA.vue'
12 | export default {
13 |   components: { ChildA },
14 |   name: 'ProvideInject',
15 |   setup() {
16 |     const count = ref(0)
17 |     const state = reactive({
18 |       firstName: 'Bruce',
19 |       lastName: 'Wayne',
20 |     })
21 |     function incrementCount() {
22 |       count.value++
23 |     }
24 | 
25 |     provide('c_userName', 'Codevolution')
26 |     provide('c_count', count)
27 |     provide('c_hero', state)
28 |     provide('incrementCount', incrementCount)
29 | 
30 |     return {
31 |       count,
32 |       incrementCount,
33 |       ...toRefs(state),
34 |     }
35 |   },
36 |   data() {
37 |     return {
38 |       name: 'Vishwas',
39 |     }
40 |   },
41 |   provide() {
42 |     return {
43 |       userName: this.name,
44 |     }
45 |   },
46 | }
47 | </script>
48 | 
49 | <style scoped>
50 | </style>


--------------------------------------------------------------------------------
/vue-http/src/components/CreatePost.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <form @submit.prevent="createPost">
 4 |       <div>
 5 |         <label for="userId">Post User ID</label>
 6 |         <input type="text" id="userId" v-model="formData.userId" />
 7 |       </div>
 8 |       <div>
 9 |         <label for="title">Post Title</label>
10 |         <input type="text" id="title" v-model="formData.title" />
11 |       </div>
12 |       <div>
13 |         <label for="body">Post Body</label>
14 |         <input type="text" id="body" v-model="formData.body" />
15 |       </div>
16 |       <button>Create Post</button>
17 |     </form>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import axios from 'axios'
23 | export default {
24 |   name: 'CreatePost',
25 |   data() {
26 |     return {
27 |       formData: {
28 |         userId: '',
29 |         title: '',
30 |         body: '',
31 |       },
32 |     }
33 |   },
34 |   methods: {
35 |     createPost() {
36 |       axios
37 |         .post('https://jsonplaceholder.typicode.com/posts', this.formData)
38 |         .then((response) => {
39 |           console.log(response)
40 |         })
41 |         .catch((error) => {
42 |           console.log(error)
43 |         })
44 |     },
45 |   },
46 | }
47 | </script>
48 | 
49 | <style scoped>
50 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/Data.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Options - {{ o_firstName }} {{ o_lastName }} a.k.a {{ o_heroName }}</h2>
 3 |   <h2>Composition - {{ c_firstName }} {{ c_lastName }} {{ c_heroName }}</h2>
 4 |   <h2>Composition - {{ greet }}</h2>
 5 |   <h2>Composition - {{ greetHero }}</h2>
 6 |   <h2>
 7 |     Composition - {{ state.firstName }} {{ state.lastName }}
 8 |     {{ state.heroName }}
 9 |   </h2>
10 |   <h2>Composition - {{ reactiveGreetHero }}</h2>
11 | </template>
12 | 
13 | <script>
14 | import { ref, reactive } from 'vue'
15 | export default {
16 |   name: 'Data',
17 |   setup() {
18 |     const c_firstName = ref('Clark')
19 |     const c_lastName = ref('Kent')
20 |     const c_heroName = ref('Superman')
21 | 
22 |     const state = reactive({
23 |       firstName: 'Princess',
24 |       lastName: 'Diana',
25 |       heroName: 'Wonder Woman',
26 |     })
27 | 
28 |     const greet = `Hello ${c_firstName.value}`
29 |     const greetHero = `Hello ${c_firstName.value} ${c_lastName.value} a.k.a ${c_heroName.value}`
30 |     const reactiveGreetHero = `Hello ${state.firstName} ${state.lastName} a.k.a ${state.heroName}`
31 | 
32 |     return {
33 |       c_firstName,
34 |       c_lastName,
35 |       c_heroName,
36 |       greet,
37 |       greetHero,
38 |       state,
39 |       reactiveGreetHero,
40 |     }
41 |   },
42 |   data() {
43 |     return {
44 |       o_firstName: 'Bruce',
45 |       o_lastName: 'Wayne',
46 |       o_heroName: 'Batman',
47 |     }
48 |   },
49 | }
50 | </script>
51 | 
52 | <style scoped>
53 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Data />
 3 |   <DemoOne />
 4 |   <DemoTwo />
 5 |   <Methods />
 6 |   <VModel />
 7 |   <Computed />
 8 |   <Watch />
 9 |   <ProvideInject />
10 |   <LifecycleO />
11 |   <LifecycleC />
12 |   <TemplateRef />
13 |   <Person />
14 |   <ClickCounter />
15 |   <HoverCounter />
16 | </template>
17 | 
18 | <script>
19 | import Data from './components/Data.vue'
20 | import DemoOne from './components/DemoOne.vue'
21 | import DemoTwo from './components/DemoTwo.vue'
22 | import Methods from './components/Methods.vue'
23 | import VModel from './components/VModel.vue'
24 | import Computed from './components/Computed.vue'
25 | import Watch from './components/Watch.vue'
26 | import ProvideInject from './components/ProvideInject.vue'
27 | import LifecycleO from './components/LifecycleO.vue'
28 | import LifecycleC from './components/LifecycleC.vue'
29 | import TemplateRef from './components/TemplateRef.vue'
30 | import Person from './components/Person.vue'
31 | import ClickCounter from './components/ClickCounter.vue'
32 | import HoverCounter from './components/HoverCounter.vue'
33 | 
34 | export default {
35 |   name: 'App',
36 |   components: {
37 |     Data,
38 |     DemoOne,
39 |     DemoTwo,
40 |     Methods,
41 |     VModel,
42 |     Computed,
43 |     Watch,
44 |     ProvideInject,
45 |     LifecycleO,
46 |     LifecycleC,
47 |     TemplateRef,
48 |     Person,
49 |     ClickCounter,
50 |     HoverCounter,
51 |   },
52 | }
53 | </script>
54 | 
55 | <style>
56 | #app {
57 |   font-family: Avenir, Helvetica, Arial, sans-serif;
58 |   -webkit-font-smoothing: antialiased;
59 |   -moz-osx-font-smoothing: grayscale;
60 |   text-align: center;
61 |   color: #2c3e50;
62 |   margin-top: 60px;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/vue-composition/src/components/Computed.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- Options API -->
 4 |     <input type="text" placeholder="First Name" v-model="fName" />
 5 |     <input type="text" placeholder="Last Name" v-model="lName" />
 6 |     <h2>Options Fullname is {{ fullName }}</h2>
 7 | 
 8 |     <!-- ref -->
 9 |     <input type="text" placeholder="First Name" v-model="refFirstName" />
10 |     <input type="text" placeholder="Last Name" v-model="refLastName" />
11 |     <h2>ref Fullname is {{ refFullName }}</h2>
12 | 
13 |     <!-- reactive -->
14 |     <input type="text" placeholder="First Name" v-model="reactiveFirstName" />
15 |     <input type="text" placeholder="Last Name" v-model="reactiveLastName" />
16 |     <h2>reactive Fullname is {{ reactiveFullName }}</h2>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { ref, reactive, toRefs, computed } from 'vue'
22 | export default {
23 |   name: 'Computed',
24 |   setup() {
25 |     const refFirstName = ref('')
26 |     const refLastName = ref('')
27 | 
28 |     const state = reactive({
29 |       reactiveFirstName: '',
30 |       reactiveLastName: '',
31 |     })
32 | 
33 |     const refFullName = computed(function () {
34 |       return `${refFirstName.value} ${refLastName.value}`
35 |     })
36 | 
37 |     const reactiveFullName = computed(function () {
38 |       return `${state.reactiveFirstName} ${state.reactiveLastName}`
39 |     })
40 | 
41 |     return {
42 |       refFirstName,
43 |       refLastName,
44 |       refFullName,
45 |       ...toRefs(state),
46 |       reactiveFullName,
47 |     }
48 |   },
49 |   data() {
50 |     return {
51 |       fName: '',
52 |       lName: '',
53 |     }
54 |   },
55 |   computed: {
56 |     fullName() {
57 |       return `${this.fName} ${this.lName}`
58 |     },
59 |   },
60 | }
61 | </script>
62 | 
63 | <style scoped>
64 | </style>


--------------------------------------------------------------------------------
/vue-composition/src/components/Watch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- Options API -->
  4 |     <input type="text" placeholder="Name" v-model="name" />
  5 | 
  6 |     <!-- ref -->
  7 |     <input type="text" placeholder="First Name" v-model="firstName" />
  8 |     <input type="text" placeholder="Last Name" v-model="lastName" />
  9 | 
 10 |     <!-- reactive -->
 11 |     <input type="text" placeholder="First Name" v-model="fName" />
 12 |     <input type="text" placeholder="Last Name" v-model="lName" />
 13 |     <input type="text" placeholder="Hero Name" v-model="options.heroName" />
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | import { ref, reactive, toRefs, watch } from 'vue'
 19 | import _ from 'lodash'
 20 | 
 21 | export default {
 22 |   name: 'Watch',
 23 |   setup() {
 24 |     const firstName = ref('')
 25 |     const lastName = ref('')
 26 | 
 27 |     const state = reactive({
 28 |       fName: '',
 29 |       lName: '',
 30 |       options: {
 31 |         heroName: '',
 32 |       },
 33 |     })
 34 | 
 35 |     watch(
 36 |       [firstName, lastName],
 37 |       function (newValues, oldValues) {
 38 |         console.log('FirstName Old value ', oldValues[0])
 39 |         console.log('FirstName New value ', newValues[0])
 40 | 
 41 |         console.log('LastName Old value ', oldValues[1])
 42 |         console.log('LastName New value ', newValues[1])
 43 |       },
 44 |       {
 45 |         immediate: true,
 46 |       }
 47 |     )
 48 | 
 49 |     watch(
 50 |       () => {
 51 |         return { ...state }
 52 |       },
 53 |       (newValue, oldValue) => {
 54 |         console.log('fname Old value ', oldValue.fName)
 55 |         console.log('fname New value ', newValue.fName)
 56 | 
 57 |         console.log('lName Old value ', oldValue.lName)
 58 |         console.log('lName New value ', newValue.lName)
 59 |       }
 60 |     )
 61 | 
 62 |     watch(
 63 |       () => state.fName,
 64 |       (newValue, oldValue) => {
 65 |         console.log('fname Old value ', oldValue)
 66 |         console.log('fname New value ', newValue)
 67 |       }
 68 |     )
 69 | 
 70 |     watch(
 71 |       () => _.cloneDeep(state.options),
 72 |       (newValue, oldValue) => {
 73 |         console.log('fname Old value ', oldValue.heroName)
 74 |         console.log('fname New value ', newValue.heroName)
 75 |       },
 76 |       {
 77 |         deep: true,
 78 |       }
 79 |     )
 80 | 
 81 |     return {
 82 |       firstName,
 83 |       lastName,
 84 |       ...toRefs(state),
 85 |     }
 86 |   },
 87 |   data() {
 88 |     return {
 89 |       name: '',
 90 |     }
 91 |   },
 92 |   watch: {
 93 |     name(newValue, oldValue) {
 94 |       console.log('Old value ', oldValue)
 95 |       console.log('New value ', newValue)
 96 |     },
 97 |   },
 98 | }
 99 | </script>
100 | 
101 | <style scoped>
102 | </style>


--------------------------------------------------------------------------------
/vue-components/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- Props -->
  3 |   <Greet :name="name" :hero-name="channel" />
  4 |   <Greet name="Bruce" hero-name="Batman" />
  5 |   <Greet name="Clark" hero-name="Superman" />
  6 |   <Greet name="Diana" hero-name="Wonder Woman" />
  7 | 
  8 |   <Article id="my-article" :likes="50" :isPublished="true" />
  9 | 
 10 |   <!-- Provide/ Inject -->
 11 |   <h3>App component {{ name }}</h3>
 12 |   <ComponentC />
 13 | 
 14 |   <!-- Events -->
 15 |   <button @click="showPopup = true">Show Popup</button>
 16 |   <Popup v-show="showPopup" @close="closePopup" />
 17 |   <Input v-model="username" />
 18 | 
 19 |   <!-- Slots -->
 20 |   <Card></Card>
 21 |   <Card>Card Content</Card>
 22 |   <Card><img src="https://picsum.photos/200" /></Card>
 23 |   <Card>
 24 |     <template v-slot:header>
 25 |       <h3>Header</h3>
 26 |     </template>
 27 |     <template v-slot:default>
 28 |       <img src="https://picsum.photos/200" />
 29 |     </template>
 30 |     <template v-slot:footer>
 31 |       <button>View Details</button>
 32 |     </template>
 33 |   </Card>
 34 | 
 35 |   <NameList>
 36 |     <template v-slot:default="slotProps">
 37 |       {{ slotProps.firstName }} {{ slotProps.lastName }}
 38 |     </template>
 39 |   </NameList>
 40 | 
 41 |   <NameList>
 42 |     <template v-slot:default="slotProps">
 43 |       {{ slotProps.lastName }}, {{ slotProps.firstName }}
 44 |     </template>
 45 |   </NameList>
 46 | 
 47 |   <h4>App component Text</h4>
 48 |   <ChildStyles>
 49 |     <h4>ChildStyles component Text</h4>
 50 |   </ChildStyles>
 51 | 
 52 |   <!-- Dynamic Components -->
 53 |   <button @click="activeTab = 'TabA'">Tab A</button>
 54 |   <button @click="activeTab = 'TabB'">Tab B</button>
 55 |   <button @click="activeTab = 'TabC'">Tab C</button>
 56 | 
 57 |   <keep-alive>
 58 |     <component :is="activeTab"></component>
 59 |   </keep-alive>
 60 | 
 61 |   <!-- Teleport Component -->
 62 |   <teleport to="#portal-root">
 63 |     <Portal />
 64 |   </teleport>
 65 | </template>
 66 | 
 67 | <script>
 68 | import Article from './components/Article.vue'
 69 | import Greet from './components/Greet.vue'
 70 | import ComponentC from './components/ComponentC.vue'
 71 | import Popup from './components/Popup.vue'
 72 | import Input from './components/Input.vue'
 73 | import Card from './components/Card.vue'
 74 | import NameList from './components/NameList.vue'
 75 | import ChildStyles from './components/ChildStyles.vue'
 76 | import TabA from './components/TabA.vue'
 77 | import TabB from './components/TabB.vue'
 78 | import TabC from './components/TabC.vue'
 79 | import Portal from './components/Portal.vue'
 80 | 
 81 | export default {
 82 |   name: 'App',
 83 |   components: {
 84 |     Greet,
 85 |     Article,
 86 |     ComponentC,
 87 |     Popup,
 88 |     Input,
 89 |     Card,
 90 |     NameList,
 91 |     ChildStyles,
 92 |     TabA,
 93 |     TabB,
 94 |     TabC,
 95 |     Portal,
 96 |   },
 97 |   data() {
 98 |     return {
 99 |       name: 'Vishwas',
100 |       channel: 'Codevolution',
101 |       showPopup: false,
102 |       username: '',
103 |       friends: ['Chandler', 'Joey', 'Monica'],
104 |       activeTab: 'TabA',
105 |     }
106 |   },
107 |   methods: {
108 |     closePopup(name) {
109 |       this.showPopup = false
110 |       console.log('name', name)
111 |     },
112 |   },
113 |   provide() {
114 |     return {
115 |       userName: this.name,
116 |     }
117 |   },
118 | }
119 | </script>
120 | 
121 | <style scoped>
122 | #app {
123 |   font-family: Avenir, Helvetica, Arial, sans-serif;
124 |   -webkit-font-smoothing: antialiased;
125 |   -moz-osx-font-smoothing: grayscale;
126 |   text-align: center;
127 |   color: #2c3e50;
128 |   margin-top: 60px;
129 | }
130 | 
131 | h4 {
132 |   color: orange;
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/vue-fundamentals/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- Binding Text -->
  3 |   <div>{{ greet }} {{ name }}</div>
  4 | 
  5 |   <!-- Binding HTML -->
  6 |   <div v-html="channel"></div>
  7 |   <div v-html="hack"></div>
  8 | 
  9 |   <!-- Bidning Attributes -->
 10 |   <h2 :id="headingId">Heading</h2>
 11 |   <button :disabled="isDisabled">Bind</button>
 12 | 
 13 |   <!-- Binding Classes -->
 14 |   <h2 class="underline">Underlined Text</h2>
 15 |   <h2 :class="status">Status</h2>
 16 |   <h2 class="underline" :class="status">Static Dynamic</h2>
 17 |   <h2 :class="isPromoted && 'promoted'">Promoted Movie</h2>
 18 |   <h2 :class="isSoldOut ? 'sold-out' : 'new'">Soldout? Movie</h2>
 19 |   <h2 :class="['new', 'promoted']">Newly Promoted Movie</h2>
 20 |   <h2 :class="[isPromoted && 'promoted', isSoldOut ? 'sold-out' : 'new']">
 21 |     Array Conditional Movie
 22 |   </h2>
 23 |   <h2
 24 |     :class="{
 25 |       promoted: isPromoted,
 26 |       new: !isSoldOut,
 27 |       'sold-out': isSoldOut,
 28 |     }"
 29 |   >
 30 |     Object Conditional Movie
 31 |   </h2>
 32 | 
 33 |   <!-- Binding Inline Styles -->
 34 |   <h2
 35 |     :style="{
 36 |       color: highlightColor,
 37 |       fontSize: headerSize + 'px',
 38 |       padding: '20px',
 39 |     }"
 40 |   >
 41 |     Inline Style
 42 |   </h2>
 43 |   <h2 :style="headerStyleObject">Style Object</h2>
 44 |   <div :style="[baseStyleObject, successStyleObject]">Success Style</div>
 45 |   <div :style="[baseStyleObject, dangerStyleObject]">Danger Style</div>
 46 | 
 47 |   <!-- Conditional Rendering -->
 48 |   <h1 v-if="num === 0">The number is zero</h1>
 49 |   <h2 v-else-if="num < 0">The number is negative</h2>
 50 |   <h2 v-else-if="num > 0">The number is positive</h2>
 51 |   <h2 v-else>Not a number</h2>
 52 |   <template v-if="showElement">
 53 |     <h2>Vishwas</h2>
 54 |     <h2>Codevolution</h2>
 55 |     <h2>Vue 3</h2>
 56 |   </template>
 57 |   <h2 v-show="showElement">Using v-show</h2>
 58 | 
 59 |   <!-- List Rendering -->
 60 |   <h2 v-for="(name, index) in names" :key="name">{{ index }} {{ name }}</h2>
 61 |   <h2 v-for="name in fullNames" :key="name.first">
 62 |     {{ name.first }} {{ name.last }}
 63 |   </h2>
 64 |   <div v-for="actor in actors" :key="actor.name">
 65 |     <h2>{{ actor.name }}</h2>
 66 |     <h3 v-for="movie in actor.movies" :key="movie">{{ movie }}</h3>
 67 |   </div>
 68 |   <h2 v-for="(value, key, index) in myInfo" :key="value">
 69 |     {{ index }} {{ key }} {{ value }}
 70 |   </h2>
 71 |   <template v-for="name in names" :key="name">
 72 |     <h2>{{ name }}</h2>
 73 |     <hr />
 74 |   </template>
 75 |   <template v-for="name in names" :key="name">
 76 |     <h2 v-if="name === 'Bruce'">{{ name }}</h2>
 77 |   </template>
 78 | 
 79 |   <!-- Methods -->
 80 |   <h2>{{ 2 + 3 + 5 }}</h2>
 81 |   <h2>{{ 5 + 10 + 15 }}</h2>
 82 |   <h2>Add method - {{ add(2, 3, 5) }}</h2>
 83 |   <h2>Add method - {{ add(5, 10, 15) }}</h2>
 84 |   <h2>Multiply method - {{ multiply(10) }}</h2>
 85 |   <h2>Multiply method - {{ multiply(baseValue) }}</h2>
 86 | 
 87 |   <!-- Event Handling -->
 88 |   <h2>{{ name }}</h2>
 89 |   <div>
 90 |     <button @click="changeName($event), increment(1, $event)">
 91 |       Change name
 92 |     </button>
 93 |   </div>
 94 |   <h2>{{ count }}</h2>
 95 |   <div>
 96 |     <button @click="increment(1, $event)">Increment</button>
 97 |     <button @click="decrement(1)">Decrement</button>
 98 |     <button @click="increment(5)">Increment 5</button>
 99 |     <button @click="decrement(5)">Decrement 5</button>
100 |   </div>
101 | 
102 |   <!-- Form Handling -->
103 |   <div>
104 |     <pre>
105 |       {{ JSON.stringify(formValues, null, 2) }}
106 |     </pre>
107 |   </div>
108 |   <form @submit.prevent="submitForm">
109 |     <div>
110 |       <label for="name">Name</label>
111 |       <input type="text" id="name" v-model.trim="formValues.name" />
112 |     </div>
113 |     <div>
114 |       <label for="profile">Profile Summary</label>
115 |       <textarea id="profile" v-model="formValues.profileSummary" />
116 |     </div>
117 |     <div>
118 |       <label for="country">Country</label>
119 |       <select id="country" v-model="formValues.country">
120 |         <option value="">Select a country</option>
121 |         <option value="india">India</option>
122 |         <option value="vietnam">Vietnam</option>
123 |         <option value="singapore">Singapore</option>
124 |       </select>
125 |     </div>
126 |     <div>
127 |       <label for="job-location">Job location</label>
128 |       <select id="job-location" v-model="formValues.jobLocation" multiple>
129 |         <option value="india">India</option>
130 |         <option value="vietnam">Vietnam</option>
131 |         <option value="singapore">Singapore</option>
132 |       </select>
133 |     </div>
134 |     <div>
135 |       <input
136 |         id="remoteWork"
137 |         type="checkbox"
138 |         v-model="formValues.remoteWork"
139 |         true-value="yes"
140 |         false-value="no"
141 |       />
142 |       <label for="remoteWork">Open to remote work?</label>
143 |     </div>
144 |     <div>
145 |       <label>Skill set</label>
146 |       <input
147 |         type="checkbox"
148 |         id="html"
149 |         value="html"
150 |         v-model="formValues.skillSet"
151 |       />
152 |       <label for="html">HTML</label>
153 |       <input
154 |         type="checkbox"
155 |         id="css"
156 |         value="css"
157 |         v-model="formValues.skillSet"
158 |       />
159 |       <label for="css">CSS</label>
160 |       <input
161 |         type="checkbox"
162 |         id="javascript"
163 |         value="javascript"
164 |         v-model="formValues.skillSet"
165 |       />
166 |       <label for="javascript">JavaScript</label>
167 |     </div>
168 |     <div>
169 |       <label>Years of Experience</label>
170 |       <input
171 |         type="radio"
172 |         id="0-2"
173 |         value="0-2"
174 |         v-model="formValues.yearsOfExperience"
175 |       />
176 |       <label for="0-2">0-2</label>
177 |       <input
178 |         type="radio"
179 |         id="3-5"
180 |         value="3-5"
181 |         v-model="formValues.yearsOfExperience"
182 |       />
183 |       <label for="3-5">3-5</label>
184 |       <input
185 |         type="radio"
186 |         id="6-10"
187 |         value="6-10"
188 |         v-model="formValues.yearsOfExperience"
189 |       />
190 |       <label for="6-10">5-10</label>
191 |       <input
192 |         type="radio"
193 |         id="10+"
194 |         value="10+"
195 |         v-model="formValues.yearsOfExperience"
196 |       />
197 |       <label for="10+">10+</label>
198 |     </div>
199 |     <div>
200 |       <label for="age">Age</label>
201 |       <input type="number" id="age" v-model.number="formValues.age" />
202 |     </div>
203 |     <div>
204 |       <button>Submit</button>
205 |     </div>
206 |   </form>
207 | 
208 |   <!-- Bonus Directives -->
209 |   <h2 v-once>{{ name }}</h2>
210 |   <button @click="name = 'Batman'">Change name</button>
211 |   <h2 v-pre>{{ name }}</h2>
212 | 
213 |   <!-- Computed Properties -->
214 |   <h2>Fullname - {{ firstName }} {{ lastName }}</h2>
215 |   <h2>Fullname - {{ fullName }}</h2>
216 |   <h2>
217 |     Total - {{ items.reduce((total, curr) => (total = total + curr.price), 0) }}
218 |   </h2>
219 |   <h2>Computed Total - {{ total }}</h2>
220 |   <h2>Method Total - {{ getTotal() }}</h2>
221 |   <button @click="items.push({ id: 4, title: 'Keyboard', price: 50 })">
222 |     Add item
223 |   </button>
224 |   <div>
225 |     <input type="text" v-model="country" />
226 |   </div>
227 |   <template v-for="item in items" :key="item.id">
228 |     <h2 v-if="item.id === 1">{{ item.title }} - {{ item.price }}</h2>
229 |   </template>
230 |   <h2 v-for="item in expensiveItems" :key="item.id">
231 |     {{ item.title }} - {{ item.price }}
232 |   </h2>
233 |   <button @click="changeFullName">Change fullname</button>
234 | 
235 |   <!-- Watchers -->
236 |   <h2>Volume Tracker (0-20)</h2>
237 |   <h3>Current Volume - {{ volume }}</h3>
238 |   <div>
239 |     <button @click="volume += 2">Increase</button>
240 |     <button @click="volume -= 2">Decrease</button>
241 |   </div>
242 |   <input type="text" v-model="movie" />
243 |   <input type="text" v-model="movieInfo.title" />
244 |   <input type="text" v-model="movieInfo.actor" />
245 |   <button @click="movieList = movieList.concat(['Wonder Woman'])">
246 |     Add movie
247 |   </button>
248 | </template>
249 | 
250 | <script>
251 | export default {
252 |   name: 'App',
253 |   data() {
254 |     return {
255 |       name: 'Vishwas',
256 |       greet: 'Hello',
257 |       channel: '<b>Codevolution</b>',
258 |       hack: `<a href="#" onclick="alert('You have been hacked!')">Win a prize!<a/>`,
259 |       headingId: 'heading',
260 |       isDisabled: true,
261 |       status: 'danger',
262 |       isPromoted: false,
263 |       isSoldOut: true,
264 |       highlightColor: 'orange',
265 |       headerSize: 50,
266 |       headerStyleObject: {
267 |         color: 'orange',
268 |         fontSize: '50px',
269 |         padding: '20px',
270 |       },
271 |       baseStyleObject: {
272 |         fontSize: '50px',
273 |         padding: '10px',
274 |       },
275 |       successStyleObject: {
276 |         color: 'green',
277 |         backgroundColor: 'lightgreen',
278 |         border: '1px solid green',
279 |       },
280 |       dangerStyleObject: {
281 |         color: 'darkred',
282 |         backgroundColor: 'red',
283 |         border: '1px solid darkred',
284 |       },
285 |       num: 1,
286 |       showElement: false,
287 |       names: ['Bruce', 'Clark', 'Diana'],
288 |       fullNames: [
289 |         { first: 'Bruce', last: 'Wayne' },
290 |         { first: 'Clark', last: 'Kent' },
291 |         { first: 'Princess', last: 'Diana' },
292 |       ],
293 |       actors: [
294 |         {
295 |           name: 'Christian Bale',
296 |           movies: ['Batman', 'American Psycho'],
297 |         },
298 |         {
299 |           name: 'Di Caprio',
300 |           movies: ['Titanic', 'Inception'],
301 |         },
302 |       ],
303 |       myInfo: {
304 |         name: 'Vishwas',
305 |         channel: 'Codevolution',
306 |         course: 'Vue 3',
307 |       },
308 |       baseMultiplier: 5,
309 |       baseValue: 2,
310 |       count: 0,
311 |       formValues: {
312 |         name: '',
313 |         profileSummary: '',
314 |         country: '',
315 |         jobLocation: [],
316 |         remoteWork: 'no',
317 |         skillSet: [],
318 |         yearsOfExperience: '',
319 |         age: null,
320 |       },
321 |       firstName: 'Bruce',
322 |       lastName: 'Wayne',
323 |       items: [
324 |         {
325 |           id: 1,
326 |           title: 'TV',
327 |           price: 100,
328 |         },
329 |         {
330 |           id: 2,
331 |           title: 'Phone',
332 |           price: 200,
333 |         },
334 |         {
335 |           id: 3,
336 |           title: 'Laptop',
337 |           price: 300,
338 |         },
339 |       ],
340 |       country: '',
341 |       volume: 16,
342 |       movie: 'batman',
343 |       movieInfo: {
344 |         title: '',
345 |         actor: '',
346 |       },
347 |       movieList: ['Batman', 'Superman'],
348 |     }
349 |   },
350 |   methods: {
351 |     add(a, b, c) {
352 |       return a + b + c
353 |     },
354 |     multiply(num) {
355 |       return num * this.baseMultiplier
356 |     },
357 |     increment(num, event) {
358 |       this.count += num
359 |       console.log(event)
360 |     },
361 |     decrement(num) {
362 |       this.count -= num
363 |     },
364 |     changeName(event) {
365 |       this.name = 'Batman'
366 |       console.log('Event', event)
367 |     },
368 |     submitForm() {
369 |       console.log('form values', this.formValues)
370 |     },
371 |     getTotal() {
372 |       console.log('getTotal method')
373 |       return this.items.reduce((total, curr) => (total = total + curr.price), 0)
374 |     },
375 |     changeFullName() {
376 |       this.fullName = 'Clark Kent'
377 |     },
378 |   },
379 |   computed: {
380 |     fullName: {
381 |       get() {
382 |         return `${this.firstName} ${this.lastName}`
383 |       },
384 |       set(value) {
385 |         const names = value.split(' ')
386 |         this.firstName = names[0]
387 |         this.lastName = names[1]
388 |       },
389 |     },
390 |     total() {
391 |       console.log('total computed property')
392 |       return this.items.reduce((total, curr) => (total = total + curr.price), 0)
393 |     },
394 |     expensiveItems() {
395 |       return this.items.filter((item) => item.price > 100)
396 |     },
397 |   },
398 |   watch: {
399 |     volume: {
400 |       handler(newValue, oldValue) {
401 |         if (newValue > oldValue && newValue === 16) {
402 |           alert(
403 |             'Listening to a high volumne for a long time may damage your hearing'
404 |           )
405 |         }
406 |       },
407 |       immediate: true,
408 |     },
409 |     movie: {
410 |       handler(newValue) {
411 |         console.log(`Calling API with movie name = ${newValue}`)
412 |       },
413 |       immediate: true,
414 |     },
415 |     movieInfo: {
416 |       handler(newValue) {
417 |         console.log(
418 |           `Calling API with movie title = ${newValue.title} and actor = ${newValue.actor}`
419 |         )
420 |       },
421 |       deep: true,
422 |     },
423 |     movieList: {
424 |       handler(newValue) {
425 |         console.log(`Updated list ${newValue}`)
426 |       },
427 |       // deep: true,
428 |     },
429 |   },
430 | }
431 | </script>
432 | 
433 | <style>
434 | #app {
435 |   font-family: Avenir, Helvetica, Arial, sans-serif;
436 |   -webkit-font-smoothing: antialiased;
437 |   -moz-osx-font-smoothing: grayscale;
438 |   /* text-align: center; */
439 |   color: #2c3e50;
440 |   margin-top: 60px;
441 | }
442 | .underline {
443 |   text-decoration: underline;
444 | }
445 | .promoted {
446 |   font-style: italic;
447 | }
448 | .new {
449 |   color: olivedrab;
450 | }
451 | .sold-out {
452 |   color: red;
453 | }
454 | label {
455 |   font-weight: bold;
456 |   display: flex;
457 |   margin-bottom: 5px;
458 | }
459 | 
460 | input + label {
461 |   font-weight: bold;
462 |   display: inline-flex;
463 |   margin-right: 20px;
464 | }
465 | 
466 | input[type='text'],
467 | textarea,
468 | select {
469 |   display: block;
470 |   width: 400px;
471 |   padding: 6px 12px;
472 |   font-size: 14px;
473 |   line-height: 1.42857143;
474 |   color: #555;
475 |   background-color: #fff;
476 |   background-image: none;
477 |   border: 1px solid #ccc;
478 |   border-radius: 4px;
479 | }
480 | </style>
481 | 


--------------------------------------------------------------------------------