├── 1-helloworld ├── index.css ├── index.html ├── index.js └── readme.md ├── 10-componentmessage ├── index.html └── readme.md ├── 11-componentdynamic ├── index.css ├── index.html └── readme.md ├── 12-async ├── index.html └── readme.md ├── 13-chart ├── index.html └── readme.md ├── 14-vuechart ├── index.html └── readme.md ├── 15-vuebars ├── index.html └── readme.md ├── 16-localproxy ├── .gitignore ├── README.md ├── client │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── main.js │ │ ├── router.js │ │ └── views │ │ │ ├── About.vue │ │ │ └── Home.vue │ └── vue.config.js └── main.go ├── 17-aggrid ├── .editorconfig ├── .gitignore ├── README.md ├── client │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── PriceCellRenderer.vue │ │ ├── main.js │ │ ├── router.js │ │ └── views │ │ │ ├── About.vue │ │ │ └── Home.vue │ └── vue.config.js └── main.go ├── 18-tailwind ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── css │ │ │ └── tailwind.css │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ └── main.js └── tailwind.js ├── 19-svgdots ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── Dots.vue │ └── dataset.json │ └── main.js ├── 2-instance ├── index.html └── readme.md ├── 20-d3connectdots ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── ConnectDots.vue │ ├── FancyConnectDots.vue │ └── dataset.json │ └── main.js ├── 21-firebase-chat ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ ├── fire.js │ └── main.js ├── 22-hellonuxt ├── .editorconfig ├── .gitignore ├── README.md ├── assets │ └── README.md ├── components │ ├── Logo.vue │ └── README.md ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages │ ├── README.md │ └── index.vue ├── plugins │ └── README.md ├── static │ ├── README.md │ └── favicon.ico └── store │ └── README.md ├── 23-todo-app ├── .gitignore ├── README.md ├── assets │ ├── README.md │ └── css │ │ └── tailwind.css ├── components │ ├── CreateTodo.vue │ ├── README.md │ ├── Todo.vue │ └── TodoList.vue ├── jsconfig.json ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages │ ├── README.md │ └── index.vue ├── plugins │ └── README.md ├── static │ ├── README.md │ └── favicon.ico ├── store │ └── README.md └── tailwind.config.js ├── 3-vbind ├── assets │ ├── vmSocks-blue.png │ └── vmSocks-green.png ├── index.html └── readme.md ├── 4-computed ├── index.html └── readme.md ├── 5-watcher ├── index.html └── readme.md ├── 6-class ├── index.html └── readme.md ├── 7-events ├── index.html └── readme.md ├── 8-vmodel ├── index.html └── readme.md ├── 9-component ├── index.html └── readme.md └── README.md /1-helloworld/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 5px; 3 | padding: 0; 4 | } 5 | -------------------------------------------------------------------------------- /1-helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | {{ message }} 10 |
11 | 12 |
13 | 14 | Hover your mouse over me for a few seconds 15 | to see my dynamically bound title! 16 | 17 |
18 | 19 |
20 | Now you see me 21 |
22 | 23 |
24 |
    25 |
  1. 26 | {{ todo.text }} 27 |
    2. 28 |
29 |
30 | 31 |
32 |

{{ message }}

33 | 34 |
35 | 36 |
37 |

{{ message }}

38 | 39 |
40 | 41 |
42 |
    43 | 49 | 54 |
55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /1-helloworld/index.js: -------------------------------------------------------------------------------- 1 | // Declarative Rendering using Vue template syntax 2 | var app = new Vue({ 3 | el: '#app', 4 | data: { 5 | message: 'Hello Vue!' 6 | } 7 | }); 8 | 9 | // Bind Elements with v-bind Directive keeps html title 10 | // attribute up to date with message property 11 | var app2 = new Vue({ 12 | el: '#app-2', 13 | data: { 14 | message: 'You loaded this page on ' + new Date().toLocaleString() 15 | } 16 | }) 17 | 18 | // v-if directive toggle demonstrating if condition 19 | var app3 = new Vue({ 20 | el: '#app-3', 21 | data: { 22 | seen: true 23 | } 24 | }) 25 | 26 | // v-for directive demonstrating loops 27 | var app4 = new Vue({ 28 | el: '#app-4', 29 | data: { 30 | todos: [ 31 | { text: 'Learn JavaScript' }, 32 | { text: 'Learn Vue' }, 33 | { text: 'Build something awesome' } 34 | ] 35 | } 36 | }) 37 | 38 | // v-on directive demonstrating callback to method 39 | var app5 = new Vue({ 40 | el: '#app-5', 41 | data: { 42 | message: 'Hello Vue.js!' 43 | }, 44 | methods: { 45 | reverseMessage: function () { 46 | this.message = this.message.split('').reverse().join('') 47 | } 48 | } 49 | }) 50 | 51 | 52 | // v-model directive demonstrates two way binding 53 | var app6 = new Vue({ 54 | el: '#app-6', 55 | data: { 56 | message: 'Hello Vue!' 57 | } 58 | }) 59 | 60 | // Component example. These are somewhat like subclasses 61 | // that can be defined and allow for decoupled functionality 62 | Vue.component('todo-item', { 63 | props: ['todo'], 64 | template: '
  • {{ todo.text }}
    • ' 65 | }) 66 | 67 | var app7 = new Vue({ 68 | el: '#app-7', 69 | data: { 70 | groceryList: [ 71 | { id: 0, text: 'Vegetables' }, 72 | { id: 1, text: 'Cheese' }, 73 | { id: 2, text: 'Whatever else humans are supposed to eat' } 74 | ] 75 | } 76 | }) 77 | -------------------------------------------------------------------------------- /1-helloworld/readme.md: -------------------------------------------------------------------------------- 1 | # Helloworld 2 | 3 | Base helloworld developed after following the [intro](https://vuejs.org/v2/guide/) at vuejs.org. This example 4 | walks through various 'directives' or vue helper functions that enable you to 5 | perform programming logic in the HTML ([DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)) such as reference variables, if 6 | statements, loops, and components (de-coupled logic). 7 | 8 | ## Demo 9 | 10 | [https://peterlamar.github.io/vue-examples/helloworld/](https://peterlamar.github.io/vue-examples/helloworld/) 11 | 12 | [code sandbox](https://codesandbox.io/s/k3r57qnqz3) to view functionality. 13 | 14 | ### Locally 15 | 16 | Open file index.html in a web browser 17 | 18 | ## Reference 19 | 20 | [vue intro](https://vuejs.org/v2/guide/) 21 | -------------------------------------------------------------------------------- /10-componentmessage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
    7 |
    8 | 14 |
    15 |
    16 |



    17 | 18 |
    19 | 20 | Something bad happened. 21 | 22 |
    23 | 24 | 25 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /10-componentmessage/readme.md: -------------------------------------------------------------------------------- 1 | # Vue Message Component 2 | 3 | This demonstrates message component functionality. It shows two different components and the ability to manipulate their data. Components are frequently used in Vue and its important to understand the fundamentals to build on later. 4 | 5 | ## Usage 6 | 7 | ```javascript 8 | Vue.component('blog-post', { 9 | props: ['post'], 10 | template: ` 11 |
    12 |

    {{ post.title }}

    13 | 16 |
    17 |
    18 | ` 19 | }) 20 | 21 | new Vue({ 22 | el: '#blog-posts-events-demo', 23 | data: { 24 | posts: [{ 25 | id: 1, 26 | title: 'My journey with Vue' 27 | }, 28 | { 29 | id: 2, 30 | title: 'Blogging with Vue' 31 | }, 32 | { 33 | id: 3, 34 | title: 'Why Vue is so fun' 35 | } 36 | ], 37 | postFontSize: 1 38 | } 39 | }) 40 | 41 | Vue.component('alert-box', { 42 | template: ` 43 |
    44 | Error! 45 | 46 |
    47 | ` 48 | }) 49 | 50 | new Vue({ 51 | el: '#app'}) 52 | ``` 53 | 54 | ```html 55 |
    56 |
    57 | 63 |
    64 |
    65 |



    66 | 67 |
    68 | 69 | Something bad happened. 70 | 71 |
    72 | ``` 73 | 74 | ## Demo 75 | 76 | [https://peterlamar.github.io/vue-examples/componentmessage/](https://peterlamar.github.io/vue-examples/componentmessage/) 77 | 78 | [code sandbox](https://codesandbox.io/s/o4rmyj7m86) 79 | 80 | ### Locally 81 | 82 | Open file index.html in a web browser 83 | -------------------------------------------------------------------------------- /11-componentdynamic/index.css: -------------------------------------------------------------------------------- 1 | .tab-button { 2 | padding: 6px 10px; 3 | border-top-left-radius: 3px; 4 | border-top-right-radius: 3px; 5 | border: 1px solid #ccc; 6 | cursor: pointer; 7 | background: #f0f0f0; 8 | margin-bottom: -1px; 9 | margin-right: -1px; 10 | } 11 | .tab-button:hover { 12 | background: #e0e0e0; 13 | } 14 | .tab-button.active { 15 | background: #e0e0e0; 16 | } 17 | .tab { 18 | border: 1px solid #ccc; 19 | padding: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /11-componentdynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
    10 | 16 | 17 | 21 |
    22 | 23 | 24 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /11-componentdynamic/readme.md: -------------------------------------------------------------------------------- 1 | # Vue Dynamic Component 2 | 3 | This demonstrates dynamic component functionality. It is intentionally simple to show how components can be dynamically created and manipulated. 4 | 5 | ## Usage 6 | 7 | ```javascript 8 | 9 | Vue.component('tab-home', { 10 | template: '
    Home component
    ' 11 | }) 12 | Vue.component('tab-posts', { 13 | template: '
    Posts component
    ' 14 | }) 15 | Vue.component('tab-archive', { 16 | template: '
    Archive component
    ' 17 | }) 18 | 19 | new Vue({ 20 | el: '#dynamic-component-demo', 21 | data: { 22 | currentTab: 'Home', 23 | tabs: ['Home', 'Posts', 'Archive'] 24 | }, 25 | computed: { 26 | currentTabComponent: function () { 27 | return 'tab-' + this.currentTab.toLowerCase() 28 | } 29 | } 30 | }) 31 | ``` 32 | 33 | ```html 34 | // Includes 35 | 36 | 37 | 38 |
    39 | 45 | 46 | 50 |
    51 | ``` 52 | 53 | ## Demo 54 | 55 | [https://peterlamar.github.io/vue-examples/componentdynamic/](https://peterlamar.github.io/vue-examples/componentdynamic/) 56 | 57 | [code sandbox](https://codesandbox.io/s/5k01x3kqrk) 58 | 59 | ### Locally 60 | 61 | Open file index.html in a web browser 62 | -------------------------------------------------------------------------------- /12-async/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
    8 | 9 | 10 |
    11 | 12 | 13 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /12-async/readme.md: -------------------------------------------------------------------------------- 1 | # [Vue Chart](https://cinwell.com/vue-trend/) 2 | 3 | Asyncronous calls is vital in modern development. This clean example from jsfiddle shows how to send a async call with a one second delay. 4 | 5 | ## Usage 6 | 7 | ```javascript 8 | console.clear() 9 | console.log('Yes! We are using Vue version', Vue.version) 10 | 11 | Vue.component('async-example', function (resolve, reject) { 12 | console.log('resolving component...') 13 | setTimeout(function () { 14 | resolve({ 15 | template: '
    I am async!
    ' 16 | }) 17 | }, 1000) 18 | }) 19 | 20 | // New VueJS instance 21 | var app = new Vue({ 22 | // CSS selector of the root DOM element 23 | el: '#app', 24 | // Some data 25 | data: () => ({ 26 | show: false, 27 | }), 28 | }) 29 | ``` 30 | 31 | ```html 32 | // Includes 33 | 34 | 35 | 36 | 37 |
    38 | 39 | 40 |
    41 | ``` 42 | 43 | ## Demo 44 | 45 | [https://peterlamar.github.io/vue-examples/async/](https://peterlamar.github.io/vue-examples/async/) 46 | 47 | [JS Fiddle](https://jsfiddle.net/Akryum/ft0dmoex/) 48 | 49 | ### Locally 50 | 51 | Open file index.html in a web browser 52 | 53 | ## Reference 54 | 55 | [JS Fiddle](https://jsfiddle.net/Akryum/ft0dmoex/) 56 | -------------------------------------------------------------------------------- /13-chart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /13-chart/readme.md: -------------------------------------------------------------------------------- 1 | # [Contour](http://forio.com/contour/get_contour.html) Chart 2 | 3 | This is a quick and easy chart, demonstrating how to do so using script tags 4 | within the html file. References (include links) are utilized to load 5 | the libraries responsible for visualizing the chart. 6 | 7 | ## Usage 8 | 9 | ```javascript 10 | new Contour({ 11 | el: '.myFirstChart' 12 | }) 13 | .cartesian() 14 | .line([1, 2, 3, 4, 5, 4, 3, 2, 1]) 15 | .render(); 16 | ``` 17 | 18 | ```html 19 | // Include files 20 | 21 | 22 | 23 | 24 | 25 | // Chart placeholder 26 |
    27 | ``` 28 | 29 | ## Demo 30 | 31 | [code pen](https://codepen.io/peterlamar/pen/vbdoJG) to view functionality. 32 | 33 | ### Locally 34 | 35 | Open file index.html in a web browser 36 | 37 | ## Reference 38 | 39 | [Contour](http://forio.com/contour/get_contour.html) 40 | -------------------------------------------------------------------------------- /14-vuechart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 | 15 | 16 |
    17 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /14-vuechart/readme.md: -------------------------------------------------------------------------------- 1 | # [Vue Chart](https://cinwell.com/vue-trend/) 2 | 3 | This demonstrates creating a line chart using the Vue Trend library. 4 | 5 | ## Usage 6 | 7 | ```javascript 8 | new Vue({ el: "#app" }); 9 | ``` 10 | 11 | ```html 12 | // Includes 13 | 14 | 15 | 16 |
    17 | 23 | 24 |
    25 | ``` 26 | 27 | ## Demo 28 | 29 | [https://peterlamar.github.io/vue-examples/vuechart/](https://peterlamar.github.io/vue-examples/vuechart/) 30 | 31 | [code sandbox](https://codesandbox.io/s/nywkpy4q0) 32 | 33 | ### Locally 34 | 35 | Open file index.html in a web browser 36 | 37 | ## Reference 38 | 39 | [Vue Trend](https://cinwell.com/vue-trend/) 40 | -------------------------------------------------------------------------------- /15-vuebars/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | VueBars 10 | 11 | 12 | 13 | 14 |
    15 | 19 | 20 |
    21 | 22 | 23 | 24 | 25 | 26 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /15-vuebars/readme.md: -------------------------------------------------------------------------------- 1 | # [Vue Bars](https://github.com/DeviaVir/vue-bar#readme) 2 | 3 | This demonstrates creating a bar chart using the Vue Trend library. 4 | 5 | ## Usage 6 | 7 | ``` 8 | npm i vuebars 9 | ``` 10 | 11 | ```javascript 12 | // main.js 13 | import Vue from 'vue'; 14 | import VueBars from 'vuebars'; 15 | 16 | Vue(VueBars); 17 | ``` 18 | 19 | ```html 20 | // In component 21 | 27 | ``` 28 | 29 | ## Demo 30 | 31 | [https://peterlamar.github.io/vue-examples/vuebars/](https://peterlamar.github.io/vue-examples/vuebars/) 32 | 33 | [https://codesandbox.io/s/74prz8jp7j](https://codesandbox.io/s/74prz8jp7j) 34 | 35 | ## Reference 36 | 37 | [Vue Bars](https://github.com/DeviaVir/vue-bar#readme) 38 | -------------------------------------------------------------------------------- /16-localproxy/.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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /16-localproxy/README.md: -------------------------------------------------------------------------------- 1 | # Local dev server proxy example 2 | 3 | Hellowworld vue with proxy enabled with vue.config.js. /report/* requests are 4 | routed to localhost:9000. This is useful when you have an external backend 5 | (python/golang/etc) as the api server and don't want to receive cross site 6 | scripting errors. The external backend would be running at port 9000 and is 7 | proxied by vue npm server for development. 8 | 9 | ## server 10 | 11 | [install go](https://golang.org/) if needed 12 | 13 | ``` 14 | go run main.go 15 | ``` 16 | 17 | ## client 18 | 19 | Change into client dir 20 | 21 | ``` 22 | cd client 23 | ``` 24 | 25 | ### Usage 26 | 27 | This code was added to vue.config.js to redirect requests 28 | 29 | ``` 30 | module.exports = { 31 | devServer: { 32 | proxy: { 33 | '/report/*': { 34 | target: 'http://localhost:9000', 35 | ws: true, 36 | changeOrigin: true 37 | } 38 | } 39 | } 40 | } 41 | ``` 42 | 43 | When the app starts, it will send a request to the server. The 44 | server will then print the request locally. This is indicating a 45 | successful proxied request occurred and no cross site scripting 46 | error was spawned by the browser. 47 | 48 | ### Project setup 49 | ``` 50 | npm install 51 | ``` 52 | 53 | #### Compiles and hot-reloads for development 54 | ``` 55 | npm run serve 56 | ``` 57 | 58 | ### Reference 59 | 60 | See [Configuration Reference](https://cli.vuejs.org/config/). 61 | -------------------------------------------------------------------------------- /16-localproxy/client/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /16-localproxy/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "configtest", 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 | "vue": "^2.5.21", 11 | "vue-resource": "^1.5.1", 12 | "vue-router": "^3.0.1" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.3.0", 16 | "@vue/cli-service": "^3.3.0", 17 | "vue-template-compiler": "^2.5.21" 18 | }, 19 | "postcss": { 20 | "plugins": { 21 | "autoprefixer": {} 22 | } 23 | }, 24 | "browserslist": [ 25 | "> 1%", 26 | "last 2 versions", 27 | "not ie <= 8" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /16-localproxy/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/16-localproxy/client/public/favicon.ico -------------------------------------------------------------------------------- /16-localproxy/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | configtest 9 | 10 | 11 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /16-localproxy/client/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | 19 | 40 | -------------------------------------------------------------------------------- /16-localproxy/client/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/16-localproxy/client/src/assets/logo.png -------------------------------------------------------------------------------- /16-localproxy/client/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 50 | 51 | 52 | 68 | -------------------------------------------------------------------------------- /16-localproxy/client/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /16-localproxy/client/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: Home 13 | }, 14 | { 15 | path: '/about', 16 | name: 'about', 17 | // route level code-splitting 18 | // this generates a separate chunk (about.[hash].js) for this route 19 | // which is lazy-loaded when the route is visited. 20 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue') 21 | } 22 | ] 23 | }) 24 | -------------------------------------------------------------------------------- /16-localproxy/client/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /16-localproxy/client/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /16-localproxy/client/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devServer: { 3 | proxy: { 4 | '/report/*': { 5 | target: 'http://localhost:9000', 6 | ws: true, 7 | changeOrigin: true 8 | } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /16-localproxy/main.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "fmt" 5 | "net/http" 6 | ) 7 | 8 | func handler(w http.ResponseWriter, r *http.Request) { 9 | var name string 10 | 11 | fmt.Print("Received request ", r) 12 | 13 | found := r.URL.Query().Get("name") 14 | if found != "" { 15 | name = found 16 | } else { 17 | name = "world" 18 | } 19 | 20 | fmt.Fprintf(w, "Hello, %s!", name) 21 | } 22 | 23 | func main() { 24 | fmt.Print("Go to http://localhost:9000/report/usage?name=Alice\n") 25 | fmt.Print("Or\n") 26 | fmt.Print("curl -H \"Content-Type: application/xml\" -X GET http://localhost:9000/report/usage?name=Alice \n") 27 | 28 | http.HandleFunc("/report/usage", handler) 29 | http.ListenAndServe(":9000", nil) 30 | } -------------------------------------------------------------------------------- /17-aggrid/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /17-aggrid/.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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /17-aggrid/README.md: -------------------------------------------------------------------------------- 1 | # Local aggrid 2 | 3 | This builds on the 4 | [LocalProxy](https://github.com/peterlamar/vue-workshop/tree/master/localproxy) 5 | project by making a rest call to a local server that returns values that are 6 | inserted into a grid. This is a good getting started example for a end-to-end 7 | web application. 8 | 9 | ## Server 10 | 11 | go run main.go 12 | 13 | ## Client 14 | 15 | Change into client dir 16 | 17 | ``` 18 | cd client 19 | ``` 20 | 21 | ### Project setup 22 | ``` 23 | npm install 24 | ``` 25 | 26 | #### Compiles and hot-reloads for development 27 | ``` 28 | npm run serve 29 | ``` 30 | 31 | ### Usage 32 | 33 | This is the code that makes a simple REST call from the client. 34 | 35 | ``` 36 | submit: function () { 37 | axios 38 | .post(this.endpoint, this.request) 39 | .then(response => { 40 | this.rowData = response.data 41 | console.log(response.data) 42 | }) 43 | .catch(function (error) { 44 | console.log(error) 45 | }) 46 | } 47 | ``` 48 | 49 | When the app starts, it will send a request to the server. The 50 | client will then display the data locally within a grid. 51 | 52 | ### Reference 53 | 54 | See [AG-GRID Vue example](https://github.com/ag-grid/ag-grid-vue-example). 55 | -------------------------------------------------------------------------------- /17-aggrid/client/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /17-aggrid/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 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 | "ag-grid-community": "^20.0.0", 12 | "ag-grid-enterprise": "^20.0.0", 13 | "ag-grid-vue": "^20.0.0", 14 | "axios": "^0.21.1", 15 | "vue": "^2.5.21", 16 | "vue-property-decorator": "7.2.0", 17 | "vue-resource": "^1.5.1", 18 | "vue-router": "^3.0.1", 19 | "vuejs-datepicker": "^1.5.4" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "^3.3.0", 23 | "@vue/cli-plugin-eslint": "^3.3.0", 24 | "@vue/cli-service": "^3.3.0", 25 | "@vue/eslint-config-standard": "^4.0.0", 26 | "babel-eslint": "^10.0.1", 27 | "eslint": "^5.8.0", 28 | "eslint-plugin-vue": "^5.0.0", 29 | "vue-template-compiler": "^2.5.21" 30 | }, 31 | "eslintConfig": { 32 | "root": true, 33 | "env": { 34 | "node": true 35 | }, 36 | "extends": [ 37 | "plugin:vue/essential", 38 | "@vue/standard" 39 | ], 40 | "rules": {}, 41 | "parserOptions": { 42 | "parser": "babel-eslint" 43 | } 44 | }, 45 | "postcss": { 46 | "plugins": { 47 | "autoprefixer": {} 48 | } 49 | }, 50 | "browserslist": [ 51 | "> 1%", 52 | "last 2 versions", 53 | "not ie <= 8" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /17-aggrid/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/17-aggrid/client/public/favicon.ico -------------------------------------------------------------------------------- /17-aggrid/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | client 9 | 10 | 11 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /17-aggrid/client/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | -------------------------------------------------------------------------------- /17-aggrid/client/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/17-aggrid/client/src/assets/logo.png -------------------------------------------------------------------------------- /17-aggrid/client/src/components/PriceCellRenderer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 18 | -------------------------------------------------------------------------------- /17-aggrid/client/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import VueResource from 'vue-resource' 5 | 6 | Vue.use(VueResource) 7 | 8 | Vue.config.productionTip = false 9 | 10 | new Vue({ 11 | router, 12 | render: h => h(App) 13 | }).$mount('#app') 14 | -------------------------------------------------------------------------------- /17-aggrid/client/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: Home 13 | }, 14 | { 15 | path: '/about', 16 | name: 'about', 17 | // route level code-splitting 18 | // this generates a separate chunk (about.[hash].js) for this route 19 | // which is lazy-loaded when the route is visited. 20 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue') 21 | } 22 | ] 23 | }) 24 | -------------------------------------------------------------------------------- /17-aggrid/client/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /17-aggrid/client/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 26 | 27 | 98 | -------------------------------------------------------------------------------- /17-aggrid/client/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devServer: { 3 | proxy: { 4 | '/getreport*': { 5 | target: 'http://localhost:9000', 6 | ws: true, 7 | changeOrigin: true 8 | } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /17-aggrid/main.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "encoding/json" 5 | "fmt" 6 | "net/http" 7 | ) 8 | 9 | type Countries struct { 10 | Name string 11 | Continent string 12 | } 13 | 14 | func handler(w http.ResponseWriter, r *http.Request) { 15 | countries := []Countries{ 16 | {Name: "USA", Continent: "North America"}, 17 | {Name: "Canada", Continent: "North America"}, 18 | {Name: "England", Continent: "Europe"}, 19 | {Name: "France", Continent: "Europe"}, 20 | } 21 | 22 | fmt.Print("Received request ", r) 23 | 24 | w.Header().Set("Content-Type", "application/json") 25 | json.NewEncoder(w).Encode(countries) 26 | } 27 | 28 | func main() { 29 | fmt.Print("Go to http://localhost:9000/getreport \n") 30 | fmt.Print("Or\n") 31 | fmt.Print("curl -H \"Content-Type: application/json\" -X GET http://localhost:9000/getreport \n") 32 | 33 | http.HandleFunc("/getreport", handler) 34 | http.ListenAndServe(":9000", nil) 35 | } 36 | -------------------------------------------------------------------------------- /18-tailwind/.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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /18-tailwind/README.md: -------------------------------------------------------------------------------- 1 | # tailwind 2 | 3 | This is a hello world example of the [tailwindcss](https://github.com/tailwindcss/tailwindcss) 4 | library. This is a modern and straight forward library for modifying css. I was 5 | starting to explore and understand css. I.e. how to make the html pages not 6 | look terrible. 7 | 8 | ## Server 9 | 10 | go run main.go 11 | 12 | ## Client 13 | 14 | Change into client dir 15 | 16 | ``` 17 | cd client 18 | ``` 19 | 20 | ### Project setup 21 | ``` 22 | npm install 23 | ``` 24 | 25 | #### Compiles and hot-reloads for development 26 | ``` 27 | npm run serve 28 | ``` 29 | 30 | ### Usage 31 | 32 | This snippet creates a floating business card in the Vue cli hello world. 33 | 34 | ``` 35 | // Tailwind component 36 |
    37 |
    40 |
    41 | 46 |
    47 |
    48 |

    Jane Doe

    49 |

    Software Developer at fancy FAANG corp.

    50 |
    51 |
    52 | 55 | 58 |
    59 |
    60 |
    61 |
    62 |
    63 | ``` 64 | 65 | 66 | ### Reference 67 | 68 | [Vue tailwind article](https://medium.com/backticks-tildes/how-to-configure-your-vue-js-app-to-use-tailwind-css-a6f95d06e1c7) 69 | 70 | [tailwind docs](https://tailwindcss.com/docs/what-is-tailwind/) -------------------------------------------------------------------------------- /18-tailwind/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /18-tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind", 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 | "vue": "^2.6.6" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.4.0", 15 | "@vue/cli-plugin-eslint": "^3.4.0", 16 | "@vue/cli-service": "^3.4.0", 17 | "babel-eslint": "^10.0.1", 18 | "eslint": "^5.8.0", 19 | "eslint-plugin-vue": "^5.0.0", 20 | "tailwindcss": "^0.7.4", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "browserslist": [ 38 | "> 1%", 39 | "last 2 versions", 40 | "not ie <= 8" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /18-tailwind/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "plugins": [ 3 | require('tailwindcss')('tailwind.js'), 4 | require('autoprefixer')(), 5 | ] 6 | } -------------------------------------------------------------------------------- /18-tailwind/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/18-tailwind/public/favicon.ico -------------------------------------------------------------------------------- /18-tailwind/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | tailwind 9 | 10 | 11 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /18-tailwind/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /18-tailwind/src/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind preflight; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /18-tailwind/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/18-tailwind/src/assets/logo.png -------------------------------------------------------------------------------- /18-tailwind/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 104 | 105 | 113 | 114 | 115 | 131 | -------------------------------------------------------------------------------- /18-tailwind/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import '@/assets/css/tailwind.css' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /18-tailwind/tailwind.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tailwind - The Utility-First CSS Framework 4 | 5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), 6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). 7 | 8 | Welcome to the Tailwind config file. This is where you can customize 9 | Tailwind specifically for your project. Don't be intimidated by the 10 | length of this file. It's really just a big JavaScript object and 11 | we've done our very best to explain each section. 12 | 13 | View the full documentation at https://tailwindcss.com. 14 | 15 | 16 | |------------------------------------------------------------------------------- 17 | | The default config 18 | |------------------------------------------------------------------------------- 19 | | 20 | | This variable contains the default Tailwind config. You don't have 21 | | to use it, but it can sometimes be helpful to have available. For 22 | | example, you may choose to merge your custom configuration 23 | | values with some of the Tailwind defaults. 24 | | 25 | */ 26 | 27 | let defaultConfig = require('tailwindcss/defaultConfig')() 28 | 29 | 30 | /* 31 | |------------------------------------------------------------------------------- 32 | | Colors https://tailwindcss.com/docs/colors 33 | |------------------------------------------------------------------------------- 34 | | 35 | | Here you can specify the colors used in your project. To get you started, 36 | | we've provided a generous palette of great looking colors that are perfect 37 | | for prototyping, but don't hesitate to change them for your project. You 38 | | own these colors, nothing will break if you change everything about them. 39 | | 40 | | We've used literal color names ("red", "blue", etc.) for the default 41 | | palette, but if you'd rather use functional names like "primary" and 42 | | "secondary", or even a numeric scale like "100" and "200", go for it. 43 | | 44 | */ 45 | 46 | let colors = { 47 | 'transparent': 'transparent', 48 | 49 | 'black': '#22292f', 50 | 'grey-darkest': '#3d4852', 51 | 'grey-darker': '#606f7b', 52 | 'grey-dark': '#8795a1', 53 | 'grey': '#b8c2cc', 54 | 'grey-light': '#dae1e7', 55 | 'grey-lighter': '#f1f5f8', 56 | 'grey-lightest': '#f8fafc', 57 | 'white': '#ffffff', 58 | 59 | 'red-darkest': '#3b0d0c', 60 | 'red-darker': '#621b18', 61 | 'red-dark': '#cc1f1a', 62 | 'red': '#e3342f', 63 | 'red-light': '#ef5753', 64 | 'red-lighter': '#f9acaa', 65 | 'red-lightest': '#fcebea', 66 | 67 | 'orange-darkest': '#462a16', 68 | 'orange-darker': '#613b1f', 69 | 'orange-dark': '#de751f', 70 | 'orange': '#f6993f', 71 | 'orange-light': '#faad63', 72 | 'orange-lighter': '#fcd9b6', 73 | 'orange-lightest': '#fff5eb', 74 | 75 | 'yellow-darkest': '#453411', 76 | 'yellow-darker': '#684f1d', 77 | 'yellow-dark': '#f2d024', 78 | 'yellow': '#ffed4a', 79 | 'yellow-light': '#fff382', 80 | 'yellow-lighter': '#fff9c2', 81 | 'yellow-lightest': '#fcfbeb', 82 | 83 | 'green-darkest': '#0f2f21', 84 | 'green-darker': '#1a4731', 85 | 'green-dark': '#1f9d55', 86 | 'green': '#38c172', 87 | 'green-light': '#51d88a', 88 | 'green-lighter': '#a2f5bf', 89 | 'green-lightest': '#e3fcec', 90 | 91 | 'teal-darkest': '#0d3331', 92 | 'teal-darker': '#20504f', 93 | 'teal-dark': '#38a89d', 94 | 'teal': '#4dc0b5', 95 | 'teal-light': '#64d5ca', 96 | 'teal-lighter': '#a0f0ed', 97 | 'teal-lightest': '#e8fffe', 98 | 99 | 'blue-darkest': '#12283a', 100 | 'blue-darker': '#1c3d5a', 101 | 'blue-dark': '#2779bd', 102 | 'blue': '#3490dc', 103 | 'blue-light': '#6cb2eb', 104 | 'blue-lighter': '#bcdefa', 105 | 'blue-lightest': '#eff8ff', 106 | 107 | 'indigo-darkest': '#191e38', 108 | 'indigo-darker': '#2f365f', 109 | 'indigo-dark': '#5661b3', 110 | 'indigo': '#6574cd', 111 | 'indigo-light': '#7886d7', 112 | 'indigo-lighter': '#b2b7ff', 113 | 'indigo-lightest': '#e6e8ff', 114 | 115 | 'purple-darkest': '#21183c', 116 | 'purple-darker': '#382b5f', 117 | 'purple-dark': '#794acf', 118 | 'purple': '#9561e2', 119 | 'purple-light': '#a779e9', 120 | 'purple-lighter': '#d6bbfc', 121 | 'purple-lightest': '#f3ebff', 122 | 123 | 'pink-darkest': '#451225', 124 | 'pink-darker': '#6f213f', 125 | 'pink-dark': '#eb5286', 126 | 'pink': '#f66d9b', 127 | 'pink-light': '#fa7ea8', 128 | 'pink-lighter': '#ffbbca', 129 | 'pink-lightest': '#ffebef', 130 | } 131 | 132 | module.exports = { 133 | 134 | /* 135 | |----------------------------------------------------------------------------- 136 | | Colors https://tailwindcss.com/docs/colors 137 | |----------------------------------------------------------------------------- 138 | | 139 | | The color palette defined above is also assigned to the "colors" key of 140 | | your Tailwind config. This makes it easy to access them in your CSS 141 | | using Tailwind's config helper. For example: 142 | | 143 | | .error { color: config('colors.red') } 144 | | 145 | */ 146 | 147 | colors: colors, 148 | 149 | 150 | /* 151 | |----------------------------------------------------------------------------- 152 | | Screens https://tailwindcss.com/docs/responsive-design 153 | |----------------------------------------------------------------------------- 154 | | 155 | | Screens in Tailwind are translated to CSS media queries. They define the 156 | | responsive breakpoints for your project. By default Tailwind takes a 157 | | "mobile first" approach, where each screen size represents a minimum 158 | | viewport width. Feel free to have as few or as many screens as you 159 | | want, naming them in whatever way you'd prefer for your project. 160 | | 161 | | Tailwind also allows for more complex screen definitions, which can be 162 | | useful in certain situations. Be sure to see the full responsive 163 | | documentation for a complete list of options. 164 | | 165 | | Class name: .{screen}:{utility} 166 | | 167 | */ 168 | 169 | screens: { 170 | 'sm': '576px', 171 | 'md': '768px', 172 | 'lg': '992px', 173 | 'xl': '1200px', 174 | }, 175 | 176 | 177 | /* 178 | |----------------------------------------------------------------------------- 179 | | Fonts https://tailwindcss.com/docs/fonts 180 | |----------------------------------------------------------------------------- 181 | | 182 | | Here is where you define your project's font stack, or font families. 183 | | Keep in mind that Tailwind doesn't actually load any fonts for you. 184 | | If you're using custom fonts you'll need to import them prior to 185 | | defining them here. 186 | | 187 | | By default we provide a native font stack that works remarkably well on 188 | | any device or OS you're using, since it just uses the default fonts 189 | | provided by the platform. 190 | | 191 | | Class name: .font-{name} 192 | | CSS property: font-family 193 | | 194 | */ 195 | 196 | fonts: { 197 | 'sans': [ 198 | 'system-ui', 199 | 'BlinkMacSystemFont', 200 | '-apple-system', 201 | 'Segoe UI', 202 | 'Roboto', 203 | 'Oxygen', 204 | 'Ubuntu', 205 | 'Cantarell', 206 | 'Fira Sans', 207 | 'Droid Sans', 208 | 'Helvetica Neue', 209 | 'sans-serif', 210 | ], 211 | 'serif': [ 212 | 'Constantia', 213 | 'Lucida Bright', 214 | 'Lucidabright', 215 | 'Lucida Serif', 216 | 'Lucida', 217 | 'DejaVu Serif', 218 | 'Bitstream Vera Serif', 219 | 'Liberation Serif', 220 | 'Georgia', 221 | 'serif', 222 | ], 223 | 'mono': [ 224 | 'Menlo', 225 | 'Monaco', 226 | 'Consolas', 227 | 'Liberation Mono', 228 | 'Courier New', 229 | 'monospace', 230 | ], 231 | }, 232 | 233 | 234 | /* 235 | |----------------------------------------------------------------------------- 236 | | Text sizes https://tailwindcss.com/docs/text-sizing 237 | |----------------------------------------------------------------------------- 238 | | 239 | | Here is where you define your text sizes. Name these in whatever way 240 | | makes the most sense to you. We use size names by default, but 241 | | you're welcome to use a numeric scale or even something else 242 | | entirely. 243 | | 244 | | By default Tailwind uses the "rem" unit type for most measurements. 245 | | This allows you to set a root font size which all other sizes are 246 | | then based on. That said, you are free to use whatever units you 247 | | prefer, be it rems, ems, pixels or other. 248 | | 249 | | Class name: .text-{size} 250 | | CSS property: font-size 251 | | 252 | */ 253 | 254 | textSizes: { 255 | 'xs': '.75rem', // 12px 256 | 'sm': '.875rem', // 14px 257 | 'base': '1rem', // 16px 258 | 'lg': '1.125rem', // 18px 259 | 'xl': '1.25rem', // 20px 260 | '2xl': '1.5rem', // 24px 261 | '3xl': '1.875rem', // 30px 262 | '4xl': '2.25rem', // 36px 263 | '5xl': '3rem', // 48px 264 | }, 265 | 266 | 267 | /* 268 | |----------------------------------------------------------------------------- 269 | | Font weights https://tailwindcss.com/docs/font-weight 270 | |----------------------------------------------------------------------------- 271 | | 272 | | Here is where you define your font weights. We've provided a list of 273 | | common font weight names with their respective numeric scale values 274 | | to get you started. It's unlikely that your project will require 275 | | all of these, so we recommend removing those you don't need. 276 | | 277 | | Class name: .font-{weight} 278 | | CSS property: font-weight 279 | | 280 | */ 281 | 282 | fontWeights: { 283 | 'hairline': 100, 284 | 'thin': 200, 285 | 'light': 300, 286 | 'normal': 400, 287 | 'medium': 500, 288 | 'semibold': 600, 289 | 'bold': 700, 290 | 'extrabold': 800, 291 | 'black': 900, 292 | }, 293 | 294 | 295 | /* 296 | |----------------------------------------------------------------------------- 297 | | Leading (line height) https://tailwindcss.com/docs/line-height 298 | |----------------------------------------------------------------------------- 299 | | 300 | | Here is where you define your line height values, or as we call 301 | | them in Tailwind, leadings. 302 | | 303 | | Class name: .leading-{size} 304 | | CSS property: line-height 305 | | 306 | */ 307 | 308 | leading: { 309 | 'none': 1, 310 | 'tight': 1.25, 311 | 'normal': 1.5, 312 | 'loose': 2, 313 | }, 314 | 315 | 316 | /* 317 | |----------------------------------------------------------------------------- 318 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 319 | |----------------------------------------------------------------------------- 320 | | 321 | | Here is where you define your letter spacing values, or as we call 322 | | them in Tailwind, tracking. 323 | | 324 | | Class name: .tracking-{size} 325 | | CSS property: letter-spacing 326 | | 327 | */ 328 | 329 | tracking: { 330 | 'tight': '-0.05em', 331 | 'normal': '0', 332 | 'wide': '0.05em', 333 | }, 334 | 335 | 336 | /* 337 | |----------------------------------------------------------------------------- 338 | | Text colors https://tailwindcss.com/docs/text-color 339 | |----------------------------------------------------------------------------- 340 | | 341 | | Here is where you define your text colors. By default these use the 342 | | color palette we defined above, however you're welcome to set these 343 | | independently if that makes sense for your project. 344 | | 345 | | Class name: .text-{color} 346 | | CSS property: color 347 | | 348 | */ 349 | 350 | textColors: colors, 351 | 352 | 353 | /* 354 | |----------------------------------------------------------------------------- 355 | | Background colors https://tailwindcss.com/docs/background-color 356 | |----------------------------------------------------------------------------- 357 | | 358 | | Here is where you define your background colors. By default these use 359 | | the color palette we defined above, however you're welcome to set 360 | | these independently if that makes sense for your project. 361 | | 362 | | Class name: .bg-{color} 363 | | CSS property: background-color 364 | | 365 | */ 366 | 367 | backgroundColors: colors, 368 | 369 | 370 | /* 371 | |----------------------------------------------------------------------------- 372 | | Background sizes https://tailwindcss.com/docs/background-size 373 | |----------------------------------------------------------------------------- 374 | | 375 | | Here is where you define your background sizes. We provide some common 376 | | values that are useful in most projects, but feel free to add other sizes 377 | | that are specific to your project here as well. 378 | | 379 | | Class name: .bg-{size} 380 | | CSS property: background-size 381 | | 382 | */ 383 | 384 | backgroundSize: { 385 | 'auto': 'auto', 386 | 'cover': 'cover', 387 | 'contain': 'contain', 388 | }, 389 | 390 | 391 | /* 392 | |----------------------------------------------------------------------------- 393 | | Border widths https://tailwindcss.com/docs/border-width 394 | |----------------------------------------------------------------------------- 395 | | 396 | | Here is where you define your border widths. Take note that border 397 | | widths require a special "default" value set as well. This is the 398 | | width that will be used when you do not specify a border width. 399 | | 400 | | Class name: .border{-side?}{-width?} 401 | | CSS property: border-width 402 | | 403 | */ 404 | 405 | borderWidths: { 406 | default: '1px', 407 | '0': '0', 408 | '2': '2px', 409 | '4': '4px', 410 | '8': '8px', 411 | }, 412 | 413 | 414 | /* 415 | |----------------------------------------------------------------------------- 416 | | Border colors https://tailwindcss.com/docs/border-color 417 | |----------------------------------------------------------------------------- 418 | | 419 | | Here is where you define your border colors. By default these use the 420 | | color palette we defined above, however you're welcome to set these 421 | | independently if that makes sense for your project. 422 | | 423 | | Take note that border colors require a special "default" value set 424 | | as well. This is the color that will be used when you do not 425 | | specify a border color. 426 | | 427 | | Class name: .border-{color} 428 | | CSS property: border-color 429 | | 430 | */ 431 | 432 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 433 | 434 | 435 | /* 436 | |----------------------------------------------------------------------------- 437 | | Border radius https://tailwindcss.com/docs/border-radius 438 | |----------------------------------------------------------------------------- 439 | | 440 | | Here is where you define your border radius values. If a `default` radius 441 | | is provided, it will be made available as the non-suffixed `.rounded` 442 | | utility. 443 | | 444 | | If your scale includes a `0` value to reset already rounded corners, it's 445 | | a good idea to put it first so other values are able to override it. 446 | | 447 | | Class name: .rounded{-side?}{-size?} 448 | | CSS property: border-radius 449 | | 450 | */ 451 | 452 | borderRadius: { 453 | 'none': '0', 454 | 'sm': '.125rem', 455 | default: '.25rem', 456 | 'lg': '.5rem', 457 | 'full': '9999px', 458 | }, 459 | 460 | 461 | /* 462 | |----------------------------------------------------------------------------- 463 | | Width https://tailwindcss.com/docs/width 464 | |----------------------------------------------------------------------------- 465 | | 466 | | Here is where you define your width utility sizes. These can be 467 | | percentage based, pixels, rems, or any other units. By default 468 | | we provide a sensible rem based numeric scale, a percentage 469 | | based fraction scale, plus some other common use-cases. You 470 | | can, of course, modify these values as needed. 471 | | 472 | | 473 | | It's also worth mentioning that Tailwind automatically escapes 474 | | invalid CSS class name characters, which allows you to have 475 | | awesome classes like .w-2/3. 476 | | 477 | | Class name: .w-{size} 478 | | CSS property: width 479 | | 480 | */ 481 | 482 | width: { 483 | 'auto': 'auto', 484 | 'px': '1px', 485 | '1': '0.25rem', 486 | '2': '0.5rem', 487 | '3': '0.75rem', 488 | '4': '1rem', 489 | '5': '1.25rem', 490 | '6': '1.5rem', 491 | '8': '2rem', 492 | '10': '2.5rem', 493 | '12': '3rem', 494 | '16': '4rem', 495 | '24': '6rem', 496 | '32': '8rem', 497 | '48': '12rem', 498 | '64': '16rem', 499 | '1/2': '50%', 500 | '1/3': '33.33333%', 501 | '2/3': '66.66667%', 502 | '1/4': '25%', 503 | '3/4': '75%', 504 | '1/5': '20%', 505 | '2/5': '40%', 506 | '3/5': '60%', 507 | '4/5': '80%', 508 | '1/6': '16.66667%', 509 | '5/6': '83.33333%', 510 | 'full': '100%', 511 | 'screen': '100vw', 512 | }, 513 | 514 | 515 | /* 516 | |----------------------------------------------------------------------------- 517 | | Height https://tailwindcss.com/docs/height 518 | |----------------------------------------------------------------------------- 519 | | 520 | | Here is where you define your height utility sizes. These can be 521 | | percentage based, pixels, rems, or any other units. By default 522 | | we provide a sensible rem based numeric scale plus some other 523 | | common use-cases. You can, of course, modify these values as 524 | | needed. 525 | | 526 | | Class name: .h-{size} 527 | | CSS property: height 528 | | 529 | */ 530 | 531 | height: { 532 | 'auto': 'auto', 533 | 'px': '1px', 534 | '1': '0.25rem', 535 | '2': '0.5rem', 536 | '3': '0.75rem', 537 | '4': '1rem', 538 | '5': '1.25rem', 539 | '6': '1.5rem', 540 | '8': '2rem', 541 | '10': '2.5rem', 542 | '12': '3rem', 543 | '16': '4rem', 544 | '24': '6rem', 545 | '32': '8rem', 546 | '48': '12rem', 547 | '64': '16rem', 548 | 'full': '100%', 549 | 'screen': '100vh', 550 | }, 551 | 552 | 553 | /* 554 | |----------------------------------------------------------------------------- 555 | | Minimum width https://tailwindcss.com/docs/min-width 556 | |----------------------------------------------------------------------------- 557 | | 558 | | Here is where you define your minimum width utility sizes. These can 559 | | be percentage based, pixels, rems, or any other units. We provide a 560 | | couple common use-cases by default. You can, of course, modify 561 | | these values as needed. 562 | | 563 | | Class name: .min-w-{size} 564 | | CSS property: min-width 565 | | 566 | */ 567 | 568 | minWidth: { 569 | '0': '0', 570 | 'full': '100%', 571 | }, 572 | 573 | 574 | /* 575 | |----------------------------------------------------------------------------- 576 | | Minimum height https://tailwindcss.com/docs/min-height 577 | |----------------------------------------------------------------------------- 578 | | 579 | | Here is where you define your minimum height utility sizes. These can 580 | | be percentage based, pixels, rems, or any other units. We provide a 581 | | few common use-cases by default. You can, of course, modify these 582 | | values as needed. 583 | | 584 | | Class name: .min-h-{size} 585 | | CSS property: min-height 586 | | 587 | */ 588 | 589 | minHeight: { 590 | '0': '0', 591 | 'full': '100%', 592 | 'screen': '100vh', 593 | }, 594 | 595 | 596 | /* 597 | |----------------------------------------------------------------------------- 598 | | Maximum width https://tailwindcss.com/docs/max-width 599 | |----------------------------------------------------------------------------- 600 | | 601 | | Here is where you define your maximum width utility sizes. These can 602 | | be percentage based, pixels, rems, or any other units. By default 603 | | we provide a sensible rem based scale and a "full width" size, 604 | | which is basically a reset utility. You can, of course, 605 | | modify these values as needed. 606 | | 607 | | Class name: .max-w-{size} 608 | | CSS property: max-width 609 | | 610 | */ 611 | 612 | maxWidth: { 613 | 'xs': '20rem', 614 | 'sm': '30rem', 615 | 'md': '40rem', 616 | 'lg': '50rem', 617 | 'xl': '60rem', 618 | '2xl': '70rem', 619 | '3xl': '80rem', 620 | '4xl': '90rem', 621 | '5xl': '100rem', 622 | 'full': '100%', 623 | }, 624 | 625 | 626 | /* 627 | |----------------------------------------------------------------------------- 628 | | Maximum height https://tailwindcss.com/docs/max-height 629 | |----------------------------------------------------------------------------- 630 | | 631 | | Here is where you define your maximum height utility sizes. These can 632 | | be percentage based, pixels, rems, or any other units. We provide a 633 | | couple common use-cases by default. You can, of course, modify 634 | | these values as needed. 635 | | 636 | | Class name: .max-h-{size} 637 | | CSS property: max-height 638 | | 639 | */ 640 | 641 | maxHeight: { 642 | 'full': '100%', 643 | 'screen': '100vh', 644 | }, 645 | 646 | 647 | /* 648 | |----------------------------------------------------------------------------- 649 | | Padding https://tailwindcss.com/docs/padding 650 | |----------------------------------------------------------------------------- 651 | | 652 | | Here is where you define your padding utility sizes. These can be 653 | | percentage based, pixels, rems, or any other units. By default we 654 | | provide a sensible rem based numeric scale plus a couple other 655 | | common use-cases like "1px". You can, of course, modify these 656 | | values as needed. 657 | | 658 | | Class name: .p{side?}-{size} 659 | | CSS property: padding 660 | | 661 | */ 662 | 663 | padding: { 664 | 'px': '1px', 665 | '0': '0', 666 | '1': '0.25rem', 667 | '2': '0.5rem', 668 | '3': '0.75rem', 669 | '4': '1rem', 670 | '5': '1.25rem', 671 | '6': '1.5rem', 672 | '8': '2rem', 673 | '10': '2.5rem', 674 | '12': '3rem', 675 | '16': '4rem', 676 | '20': '5rem', 677 | '24': '6rem', 678 | '32': '8rem', 679 | }, 680 | 681 | 682 | /* 683 | |----------------------------------------------------------------------------- 684 | | Margin https://tailwindcss.com/docs/margin 685 | |----------------------------------------------------------------------------- 686 | | 687 | | Here is where you define your margin utility sizes. These can be 688 | | percentage based, pixels, rems, or any other units. By default we 689 | | provide a sensible rem based numeric scale plus a couple other 690 | | common use-cases like "1px". You can, of course, modify these 691 | | values as needed. 692 | | 693 | | Class name: .m{side?}-{size} 694 | | CSS property: margin 695 | | 696 | */ 697 | 698 | margin: { 699 | 'auto': 'auto', 700 | 'px': '1px', 701 | '0': '0', 702 | '1': '0.25rem', 703 | '2': '0.5rem', 704 | '3': '0.75rem', 705 | '4': '1rem', 706 | '5': '1.25rem', 707 | '6': '1.5rem', 708 | '8': '2rem', 709 | '10': '2.5rem', 710 | '12': '3rem', 711 | '16': '4rem', 712 | '20': '5rem', 713 | '24': '6rem', 714 | '32': '8rem', 715 | }, 716 | 717 | 718 | /* 719 | |----------------------------------------------------------------------------- 720 | | Negative margin https://tailwindcss.com/docs/negative-margin 721 | |----------------------------------------------------------------------------- 722 | | 723 | | Here is where you define your negative margin utility sizes. These can 724 | | be percentage based, pixels, rems, or any other units. By default we 725 | | provide matching values to the padding scale since these utilities 726 | | generally get used together. You can, of course, modify these 727 | | values as needed. 728 | | 729 | | Class name: .-m{side?}-{size} 730 | | CSS property: margin 731 | | 732 | */ 733 | 734 | negativeMargin: { 735 | 'px': '1px', 736 | '0': '0', 737 | '1': '0.25rem', 738 | '2': '0.5rem', 739 | '3': '0.75rem', 740 | '4': '1rem', 741 | '5': '1.25rem', 742 | '6': '1.5rem', 743 | '8': '2rem', 744 | '10': '2.5rem', 745 | '12': '3rem', 746 | '16': '4rem', 747 | '20': '5rem', 748 | '24': '6rem', 749 | '32': '8rem', 750 | }, 751 | 752 | 753 | /* 754 | |----------------------------------------------------------------------------- 755 | | Shadows https://tailwindcss.com/docs/shadows 756 | |----------------------------------------------------------------------------- 757 | | 758 | | Here is where you define your shadow utilities. As you can see from 759 | | the defaults we provide, it's possible to apply multiple shadows 760 | | per utility using comma separation. 761 | | 762 | | If a `default` shadow is provided, it will be made available as the non- 763 | | suffixed `.shadow` utility. 764 | | 765 | | Class name: .shadow-{size?} 766 | | CSS property: box-shadow 767 | | 768 | */ 769 | 770 | shadows: { 771 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 772 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 773 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 774 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 775 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 776 | 'none': 'none', 777 | }, 778 | 779 | 780 | /* 781 | |----------------------------------------------------------------------------- 782 | | Z-index https://tailwindcss.com/docs/z-index 783 | |----------------------------------------------------------------------------- 784 | | 785 | | Here is where you define your z-index utility values. By default we 786 | | provide a sensible numeric scale. You can, of course, modify these 787 | | values as needed. 788 | | 789 | | Class name: .z-{index} 790 | | CSS property: z-index 791 | | 792 | */ 793 | 794 | zIndex: { 795 | 'auto': 'auto', 796 | '0': 0, 797 | '10': 10, 798 | '20': 20, 799 | '30': 30, 800 | '40': 40, 801 | '50': 50, 802 | }, 803 | 804 | 805 | /* 806 | |----------------------------------------------------------------------------- 807 | | Opacity https://tailwindcss.com/docs/opacity 808 | |----------------------------------------------------------------------------- 809 | | 810 | | Here is where you define your opacity utility values. By default we 811 | | provide a sensible numeric scale. You can, of course, modify these 812 | | values as needed. 813 | | 814 | | Class name: .opacity-{name} 815 | | CSS property: opacity 816 | | 817 | */ 818 | 819 | opacity: { 820 | '0': '0', 821 | '25': '.25', 822 | '50': '.5', 823 | '75': '.75', 824 | '100': '1', 825 | }, 826 | 827 | 828 | /* 829 | |----------------------------------------------------------------------------- 830 | | SVG fill https://tailwindcss.com/docs/svg 831 | |----------------------------------------------------------------------------- 832 | | 833 | | Here is where you define your SVG fill colors. By default we just provide 834 | | `fill-current` which sets the fill to the current text color. This lets you 835 | | specify a fill color using existing text color utilities and helps keep the 836 | | generated CSS file size down. 837 | | 838 | | Class name: .fill-{name} 839 | | CSS property: fill 840 | | 841 | */ 842 | 843 | svgFill: { 844 | 'current': 'currentColor', 845 | }, 846 | 847 | 848 | /* 849 | |----------------------------------------------------------------------------- 850 | | SVG stroke https://tailwindcss.com/docs/svg 851 | |----------------------------------------------------------------------------- 852 | | 853 | | Here is where you define your SVG stroke colors. By default we just provide 854 | | `stroke-current` which sets the stroke to the current text color. This lets 855 | | you specify a stroke color using existing text color utilities and helps 856 | | keep the generated CSS file size down. 857 | | 858 | | Class name: .stroke-{name} 859 | | CSS property: stroke 860 | | 861 | */ 862 | 863 | svgStroke: { 864 | 'current': 'currentColor', 865 | }, 866 | 867 | 868 | /* 869 | |----------------------------------------------------------------------------- 870 | | Modules https://tailwindcss.com/docs/configuration#modules 871 | |----------------------------------------------------------------------------- 872 | | 873 | | Here is where you control which modules are generated and what variants are 874 | | generated for each of those modules. 875 | | 876 | | Currently supported variants: 877 | | - responsive 878 | | - hover 879 | | - focus 880 | | - focus-within 881 | | - active 882 | | - group-hover 883 | | 884 | | To disable a module completely, use `false` instead of an array. 885 | | 886 | */ 887 | 888 | modules: { 889 | appearance: ['responsive'], 890 | backgroundAttachment: ['responsive'], 891 | backgroundColors: ['responsive', 'hover', 'focus'], 892 | backgroundPosition: ['responsive'], 893 | backgroundRepeat: ['responsive'], 894 | backgroundSize: ['responsive'], 895 | borderCollapse: [], 896 | borderColors: ['responsive', 'hover', 'focus'], 897 | borderRadius: ['responsive'], 898 | borderStyle: ['responsive'], 899 | borderWidths: ['responsive'], 900 | cursor: ['responsive'], 901 | display: ['responsive'], 902 | flexbox: ['responsive'], 903 | float: ['responsive'], 904 | fonts: ['responsive'], 905 | fontWeights: ['responsive', 'hover', 'focus'], 906 | height: ['responsive'], 907 | leading: ['responsive'], 908 | lists: ['responsive'], 909 | margin: ['responsive'], 910 | maxHeight: ['responsive'], 911 | maxWidth: ['responsive'], 912 | minHeight: ['responsive'], 913 | minWidth: ['responsive'], 914 | negativeMargin: ['responsive'], 915 | objectFit: false, 916 | objectPosition: false, 917 | opacity: ['responsive'], 918 | outline: ['focus'], 919 | overflow: ['responsive'], 920 | padding: ['responsive'], 921 | pointerEvents: ['responsive'], 922 | position: ['responsive'], 923 | resize: ['responsive'], 924 | shadows: ['responsive', 'hover', 'focus'], 925 | svgFill: [], 926 | svgStroke: [], 927 | tableLayout: ['responsive'], 928 | textAlign: ['responsive'], 929 | textColors: ['responsive', 'hover', 'focus'], 930 | textSizes: ['responsive'], 931 | textStyle: ['responsive', 'hover', 'focus'], 932 | tracking: ['responsive'], 933 | userSelect: ['responsive'], 934 | verticalAlign: ['responsive'], 935 | visibility: ['responsive'], 936 | whitespace: ['responsive'], 937 | width: ['responsive'], 938 | zIndex: ['responsive'], 939 | }, 940 | 941 | 942 | /* 943 | |----------------------------------------------------------------------------- 944 | | Plugins https://tailwindcss.com/docs/plugins 945 | |----------------------------------------------------------------------------- 946 | | 947 | | Here is where you can register any plugins you'd like to use in your 948 | | project. Tailwind's built-in `container` plugin is enabled by default to 949 | | give you a Bootstrap-style responsive container component out of the box. 950 | | 951 | | Be sure to view the complete plugin documentation to learn more about how 952 | | the plugin system works. 953 | | 954 | */ 955 | 956 | plugins: [ 957 | require('tailwindcss/plugins/container')({ 958 | // center: true, 959 | // padding: '1rem', 960 | }), 961 | ], 962 | 963 | 964 | /* 965 | |----------------------------------------------------------------------------- 966 | | Advanced Options https://tailwindcss.com/docs/configuration#options 967 | |----------------------------------------------------------------------------- 968 | | 969 | | Here is where you can tweak advanced configuration options. We recommend 970 | | leaving these options alone unless you absolutely need to change them. 971 | | 972 | */ 973 | 974 | options: { 975 | prefix: '', 976 | important: false, 977 | separator: ':', 978 | }, 979 | 980 | } 981 | -------------------------------------------------------------------------------- /19-svgdots/.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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /19-svgdots/README.md: -------------------------------------------------------------------------------- 1 | # 19-svgdots 2 | 3 | This is a quick recreation to draw several dots on the screen. This is adapted from a d3-Vue [workshop](https://github.com/thegoodideaco/vue-d3-workshop) 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | ### Run your tests 21 | ``` 22 | npm run test 23 | ``` 24 | 25 | ### Lints and fixes files 26 | ``` 27 | npm run lint 28 | ``` 29 | 30 | ### Customize configuration 31 | See [Configuration Reference](https://cli.vuejs.org/config/). 32 | -------------------------------------------------------------------------------- /19-svgdots/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /19-svgdots/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "19-svgdots", 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": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.11.0", 16 | "@vue/cli-plugin-eslint": "^3.11.0", 17 | "@vue/cli-service": "^3.11.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.6.10" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "postcss": { 38 | "plugins": { 39 | "autoprefixer": {} 40 | } 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /19-svgdots/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/19-svgdots/public/favicon.ico -------------------------------------------------------------------------------- /19-svgdots/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19-svgdots 9 | 10 | 11 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /19-svgdots/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /19-svgdots/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/19-svgdots/src/assets/logo.png -------------------------------------------------------------------------------- /19-svgdots/src/components/Dots.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /19-svgdots/src/components/dataset.json: -------------------------------------------------------------------------------- 1 | [ 2 | [50, 50], 3 | [100, 100], 4 | [150, 100], 5 | [50, 150], 6 | [0, 25] 7 | ] -------------------------------------------------------------------------------- /19-svgdots/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /2-instance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

    7 | Message: {{ msg }} 8 |

    9 |
    10 |
    11 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /2-instance/readme.md: -------------------------------------------------------------------------------- 1 | # Vue Instance 2 | 3 | This demonstrates creating the core Vue instance, which is another sort of 4 | hello world but for the framework. Think of this as the minimum Vue app or 5 | starting point. Assigning variables to the core instance happens by reference, 6 | so then updating the core instance updates the variables. 7 | 8 | Furthermore, callback methods can be inserted into the Vue Core app flow below. 9 | 10 | ## Demo 11 | 12 | [https://peterlamar.github.io/vue-examples/instance/](https://peterlamar.github.io/vue-examples/instance/) 13 | 14 | [code sanbox](https://codesandbox.io/s/znormz04pl) to view functionality. This one isn't terribly interesting from the browser and is more meant as a code console demo. 15 | 16 | ### Locally 17 | 18 | Open file index.html in a web browser 19 | 20 | ## Reference 21 | 22 | [Vue Instance](https://vuejs.org/v2/guide/instance.html) 23 | 24 | ![Vue Lifecycle](https://vuejs.org/images/lifecycle.png) 25 | -------------------------------------------------------------------------------- /20-d3connectdots/.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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /20-d3connectdots/README.md: -------------------------------------------------------------------------------- 1 | # 20-d3connectdots 2 | 3 | This is a quick recreation to draw and connect several dots on the screen. This is adapted from a d3-Vue [workshop](https://github.com/thegoodideaco/vue-d3-workshop) 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | ### Run your tests 21 | ``` 22 | npm run test 23 | ``` 24 | 25 | ### Lints and fixes files 26 | ``` 27 | npm run lint 28 | ``` 29 | 30 | ### Customize configuration 31 | See [Configuration Reference](https://cli.vuejs.org/config/). 32 | -------------------------------------------------------------------------------- /20-d3connectdots/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /20-d3connectdots/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "20-d3connectdots", 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": "^2.6.5", 12 | "d3": "^5.12.0", 13 | "node-sass": "^4.13.1", 14 | "sass-loader": "^8.0.0", 15 | "vue": "^2.6.10" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^3.11.0", 19 | "@vue/cli-plugin-eslint": "^3.11.0", 20 | "@vue/cli-service": "^3.11.0", 21 | "babel-eslint": "^10.0.1", 22 | "eslint": "^5.16.0", 23 | "eslint-plugin-vue": "^5.0.0", 24 | "vue-template-compiler": "^2.6.10" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "rules": {}, 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | } 39 | }, 40 | "postcss": { 41 | "plugins": { 42 | "autoprefixer": {} 43 | } 44 | }, 45 | "browserslist": [ 46 | "> 1%", 47 | "last 2 versions" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /20-d3connectdots/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/20-d3connectdots/public/favicon.ico -------------------------------------------------------------------------------- /20-d3connectdots/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 20-d3connectdots 9 | 10 | 11 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /20-d3connectdots/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | 27 | 37 | -------------------------------------------------------------------------------- /20-d3connectdots/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/20-d3connectdots/src/assets/logo.png -------------------------------------------------------------------------------- /20-d3connectdots/src/components/ConnectDots.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /20-d3connectdots/src/components/FancyConnectDots.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 54 | 55 | -------------------------------------------------------------------------------- /20-d3connectdots/src/components/dataset.json: -------------------------------------------------------------------------------- 1 | [ 2 | [50, 25], 3 | [150, 50], 4 | [300, 75], 5 | [250, 100], 6 | [50, 150], 7 | [0, 75] 8 | ] -------------------------------------------------------------------------------- /20-d3connectdots/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /21-firebase-chat/.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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /21-firebase-chat/README.md: -------------------------------------------------------------------------------- 1 | # firebase-chat2 2 | 3 | Example from https://medium.com/@andrewhartnett/building-a-chat-app-with-vuejs-firebase-1dd2d53be52e, requires Firebase config and 'Realtime' database set to 4 | 5 | ``` 6 | { 7 | "rules": { 8 | ".read": true, 9 | ".write": true 10 | } 11 | } 12 | ``` 13 | . Firebase enables the Cloud Firestore by default so this step is confusing to users following the tutorial. 14 | 15 | ## Project setup 16 | ``` 17 | npm install 18 | ``` 19 | 20 | ### Compiles and hot-reloads for development 21 | ``` 22 | npm run serve 23 | ``` 24 | 25 | ### Compiles and minifies for production 26 | ``` 27 | npm run build 28 | ``` 29 | 30 | ### Lints and fixes files 31 | ``` 32 | npm run lint 33 | ``` 34 | 35 | ### Customize configuration 36 | See [Configuration Reference](https://cli.vuejs.org/config/). 37 | -------------------------------------------------------------------------------- /21-firebase-chat/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /21-firebase-chat/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "firebase-chat2", 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.3.2", 12 | "firebase": "^7.4.0", 13 | "vue": "^2.6.10" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^4.0.0", 17 | "@vue/cli-plugin-eslint": "^4.0.0", 18 | "@vue/cli-service": "^5.0.8", 19 | "babel-eslint": "^10.0.3", 20 | "eslint": "^5.16.0", 21 | "eslint-plugin-vue": "^5.0.0", 22 | "vue-template-compiler": "^2.6.10" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/essential", 31 | "eslint:recommended" 32 | ], 33 | "rules": {}, 34 | "parserOptions": { 35 | "parser": "babel-eslint" 36 | } 37 | }, 38 | "postcss": { 39 | "plugins": { 40 | "autoprefixer": {} 41 | } 42 | }, 43 | "browserslist": [ 44 | "> 1%", 45 | "last 2 versions" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /21-firebase-chat/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/21-firebase-chat/public/favicon.ico -------------------------------------------------------------------------------- /21-firebase-chat/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | firebase-chat2 9 | 10 | 11 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /21-firebase-chat/src/App.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 90 | 91 | 112 | -------------------------------------------------------------------------------- /21-firebase-chat/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/21-firebase-chat/src/assets/logo.png -------------------------------------------------------------------------------- /21-firebase-chat/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /21-firebase-chat/src/fire.js: -------------------------------------------------------------------------------- 1 | // src/fire.js 2 | import firebase from 'firebase' 3 | const firebaseConfig = { 4 | apiKey: "", 5 | authDomain: "", 6 | databaseURL: "", 7 | projectId: "", 8 | storageBucket: "", 9 | messagingSenderId: "", 10 | appId: "", 11 | measurementId: "" 12 | }; 13 | var fire = firebase.initializeApp(firebaseConfig); 14 | export default fire; -------------------------------------------------------------------------------- /21-firebase-chat/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /22-hellonuxt/.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 | -------------------------------------------------------------------------------- /22-hellonuxt/.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 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | -------------------------------------------------------------------------------- /22-hellonuxt/README.md: -------------------------------------------------------------------------------- 1 | # HelloNuxt 2 | 3 | This is the base result after cmd: 4 | 5 | ``` 6 | npx create-nuxt-app hellonuxt 7 | ``` 8 | 9 | Nuxt is a sub project of Vue.js 10 | 11 | ## Nuxt Benefits 12 | 13 | 1. Comes with Vuex, Vue Router and Vue-Meta, which are considered best practice 14 | Vue components (at least by the Nuxt authors). These are optional within the 15 | Vue cli 16 | 17 | 2. Extra project folders 18 | * Pages - Application views and routes 19 | * Store - Vuex files 20 | * Layouts - Templates 21 | 22 | 3. Automated routing 23 | * Place vue components into pages folder and get routing with no config 24 | 25 | 4. Pre-configured for server generating 26 | * Helps with performance and Search Engine Optimization 27 | 28 | ## Reference 29 | [nuxt](https://github.com/nuxt/nuxt.js) 30 | 31 | ## Build Setup 32 | 33 | ``` bash 34 | # install dependencies 35 | $ npm install 36 | 37 | # serve with hot reload at localhost:3000 38 | $ npm run dev 39 | 40 | # build for production and launch server 41 | $ npm run build 42 | $ npm start 43 | 44 | # generate static project 45 | $ npm run generate 46 | ``` 47 | 48 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 49 | -------------------------------------------------------------------------------- /22-hellonuxt/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 | -------------------------------------------------------------------------------- /22-hellonuxt/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | -------------------------------------------------------------------------------- /22-hellonuxt/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 | -------------------------------------------------------------------------------- /22-hellonuxt/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 | -------------------------------------------------------------------------------- /22-hellonuxt/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | -------------------------------------------------------------------------------- /22-hellonuxt/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 | -------------------------------------------------------------------------------- /22-hellonuxt/nuxt.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package') 2 | 3 | 4 | module.exports = { 5 | mode: 'universal', 6 | 7 | /* 8 | ** Headers of the page 9 | */ 10 | head: { 11 | title: pkg.name, 12 | meta: [ 13 | { charset: 'utf-8' }, 14 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 15 | { hid: 'description', name: 'description', content: pkg.description } 16 | ], 17 | link: [ 18 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 19 | ] 20 | }, 21 | 22 | /* 23 | ** Customize the progress-bar color 24 | */ 25 | loading: { color: '#fff' }, 26 | 27 | /* 28 | ** Global CSS 29 | */ 30 | css: [ 31 | ], 32 | 33 | /* 34 | ** Plugins to load before mounting the App 35 | */ 36 | plugins: [ 37 | ], 38 | 39 | /* 40 | ** Nuxt.js modules 41 | */ 42 | modules: [ 43 | ], 44 | 45 | /* 46 | ** Build configuration 47 | */ 48 | build: { 49 | /* 50 | ** You can extend webpack config here 51 | */ 52 | extend(config, ctx) { 53 | 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /22-hellonuxt/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ls", 3 | "version": "1.0.0", 4 | "description": "My exquisite Nuxt.js project", 5 | "author": "peterlamar", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate" 12 | }, 13 | "dependencies": { 14 | "cross-env": "^5.2.0", 15 | "nuxt": "^2.3.4" 16 | }, 17 | "devDependencies": { 18 | "nodemon": "^1.18.9" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /22-hellonuxt/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 | -------------------------------------------------------------------------------- /22-hellonuxt/pages/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | 37 | 69 | -------------------------------------------------------------------------------- /22-hellonuxt/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 | -------------------------------------------------------------------------------- /22-hellonuxt/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 | 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 11 | -------------------------------------------------------------------------------- /22-hellonuxt/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/22-hellonuxt/static/favicon.ico -------------------------------------------------------------------------------- /22-hellonuxt/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 | -------------------------------------------------------------------------------- /23-todo-app/.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 | .editorconfig 83 | 84 | # Service worker 85 | sw.* 86 | 87 | # Mac OSX 88 | .DS_Store 89 | 90 | # Vim swap files 91 | *.swp 92 | -------------------------------------------------------------------------------- /23-todo-app/README.md: -------------------------------------------------------------------------------- 1 | # todo-app 2 | 3 | Todo app converted to nuxt, based off of tutorial from [here](https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2). Good example of simple memory storage and DOM manipulation. 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm run 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 run start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 23 | -------------------------------------------------------------------------------- /23-todo-app/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 | -------------------------------------------------------------------------------- /23-todo-app/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss/base'; 2 | @import 'tailwindcss/components'; 3 | @import 'tailwindcss/utilities'; 4 | -------------------------------------------------------------------------------- /23-todo-app/components/CreateTodo.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 60 | -------------------------------------------------------------------------------- /23-todo-app/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 | -------------------------------------------------------------------------------- /23-todo-app/components/Todo.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 63 | -------------------------------------------------------------------------------- /23-todo-app/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /23-todo-app/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "~/*": ["./*"], 6 | "@/*": ["./*"], 7 | "~~/*": ["./*"], 8 | "@@/*": ["./*"] 9 | } 10 | }, 11 | "exclude": ["node_modules", ".nuxt", "dist"] 12 | } 13 | -------------------------------------------------------------------------------- /23-todo-app/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 | -------------------------------------------------------------------------------- /23-todo-app/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | -------------------------------------------------------------------------------- /23-todo-app/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 | -------------------------------------------------------------------------------- /23-todo-app/nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | mode: 'universal', 4 | /* 5 | ** Headers of the page 6 | */ 7 | head: { 8 | title: process.env.npm_package_name || '', 9 | meta: [ 10 | { charset: 'utf-8' }, 11 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 12 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 13 | ], 14 | script: [ 15 | { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' }, 16 | { src: 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js' }, 17 | { src: 'https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js' } 18 | ], 19 | link: [ 20 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 21 | { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' }, 22 | { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.cs' } 23 | ] 24 | }, 25 | /* 26 | ** Customize the progress-bar color 27 | */ 28 | loading: { color: '#fff' }, 29 | /* 30 | ** Global CSS 31 | */ 32 | css: [ 33 | ], 34 | /* 35 | ** Plugins to load before mounting the App 36 | */ 37 | plugins: [ 38 | ], 39 | /* 40 | ** Nuxt.js dev-modules 41 | */ 42 | buildModules: [ 43 | // Doc: https://github.com/nuxt-community/nuxt-tailwindcss 44 | '@nuxtjs/tailwindcss', 45 | ], 46 | /* 47 | ** Nuxt.js modules 48 | */ 49 | modules: [ 50 | ], 51 | /* 52 | ** Build configuration 53 | */ 54 | build: { 55 | /* 56 | ** You can extend webpack config here 57 | */ 58 | extend (config, ctx) { 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /23-todo-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-app", 3 | "version": "1.0.0", 4 | "description": "My kickass Nuxt.js project", 5 | "author": "peterlamar", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate" 12 | }, 13 | "dependencies": { 14 | "nuxt": "^2.0.0" 15 | }, 16 | "devDependencies": { 17 | "@nuxtjs/tailwindcss": "^1.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /23-todo-app/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 | -------------------------------------------------------------------------------- /23-todo-app/pages/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 49 | 50 | 87 | -------------------------------------------------------------------------------- /23-todo-app/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 | -------------------------------------------------------------------------------- /23-todo-app/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 | -------------------------------------------------------------------------------- /23-todo-app/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/23-todo-app/static/favicon.ico -------------------------------------------------------------------------------- /23-todo-app/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 | -------------------------------------------------------------------------------- /23-todo-app/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | ** TailwindCSS Configuration File 3 | ** 4 | ** Docs: https://tailwindcss.com/docs/configuration 5 | ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js 6 | */ 7 | module.exports = { 8 | theme: {}, 9 | variants: {}, 10 | plugins: [] 11 | } 12 | -------------------------------------------------------------------------------- /3-vbind/assets/vmSocks-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/3-vbind/assets/vmSocks-blue.png -------------------------------------------------------------------------------- /3-vbind/assets/vmSocks-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterlamar/vue-examples/f16e00e98468f0987097a5cf25d0f875aaeceb23/3-vbind/assets/vmSocks-green.png -------------------------------------------------------------------------------- /3-vbind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 |
    10 |
    11 | 14 | 15 |
    16 | 17 |
    18 |

    {{product}}

    19 |
    20 |
    21 |
    22 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /3-vbind/readme.md: -------------------------------------------------------------------------------- 1 | # vbind 2 | 3 | vbind allows an html property to mirror a javascript variable. You can think of it as setting an html variable to a javascript variable by reference so that changes to the javascript variable appear in the html variable or property. 4 | 5 | The vbind concept was confusing to me at first so I wanted another example. I was able to find this after some searching and it helped explain the concept. In this example the html is 6 | 7 | ``` 8 | 9 | ``` 10 | 11 | And the Vue Javascript code changes this to 12 | 13 | ``` 14 | 15 | ``` 16 | 17 | by using v-binding to bing the Vue component to the html div tag and then assigning a new value to the image attribute. 18 | 19 | ## Demo 20 | 21 | [code sanbox](https://codesandbox.io/s/vvm7z2224y) 22 | 23 | [https://peterlamar.github.io/vue-examples/vbind/](https://peterlamar.github.io/vue-examples/vbind/) 24 | 25 | ## Demo locally 26 | 27 | Open file index.html in a web browser 28 | 29 | ## Reference 30 | 31 | https://www.vuemastery.com/courses/intro-to-vue-js/attribute-binding/ 32 | -------------------------------------------------------------------------------- /4-computed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 |

    Original message: "{{ message }}"

    10 |

    Computed reversed message: "{{ reversedMessage }}"

    11 |

    Computed now: "{{ now }}"

    12 |

    Reversed message: "{{ reverseMessage() }}"

    13 | 14 |
    15 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /4-computed/readme.md: -------------------------------------------------------------------------------- 1 | # [Vue Computed](https://vuejs.org/v2/guide/computed.html) 2 | 3 | This example shows useage of 'Computed' properties. By using the 'computed' property I have a place I can insert functions that are called when a variable is modified. 4 | 5 | ## Usage 6 | 7 | ```javascript 8 | var vm = new Vue({ 9 | el: '#example', 10 | data: { 11 | message: 'Hello' 12 | }, 13 | computed: { 14 | // a computed getter 15 | reversedMessage: function() { 16 | // `this` points to the vm instance 17 | return this.message.split('').reverse().join('') 18 | }, 19 | now: function () { 20 | return Date.now() 21 | } 22 | }, 23 | methods: { 24 | reverseMessage: function() { 25 | return this.message.split('').reverse().join('') 26 | } 27 | } 28 | }) 29 | ``` 30 | 31 | ```html 32 | // Include 33 | 34 | 35 |
    36 |

    Original message: "{{ message }}"

    37 |

    Computed reversed message: "{{ reversedMessage }}"

    38 |

    Computed now: "{{ now }}"

    39 |

    Reversed message: "{{ reverseMessage() }}"

    40 |
    41 | ``` 42 | 43 | ## Demo 44 | 45 | [https://peterlamar.github.io/vue-examples/computed/](https://peterlamar.github.io/vue-examples/computed/) 46 | 47 | [code sandbox](https://codesandbox.io/s/zk8jz7w84l) 48 | 49 | ### Locally 50 | 51 | Open file index.html in a web browser 52 | 53 | ## Reference 54 | 55 | [Vue Computed](https://vuejs.org/v2/guide/computed.html) -------------------------------------------------------------------------------- /5-watcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
    11 |

    12 | Ask a yes/no question: 13 | 14 |

    15 |

    {{ answer }}

    16 |
    17 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /5-watcher/readme.md: -------------------------------------------------------------------------------- 1 | # [Vue Watchers](https://vuejs.org/v2/guide/computed.html#Watchers) 2 | 3 | This example shows useage of 'Watcher' properties. Unfortunetly the functionality of Watchers are very similar to computed properties so it can be initially confusing. Computed properties can respond when many variables are modified, but watchers can be attached to only one variable. 4 | 5 | ## Usage 6 | 7 | ```javascript 8 | var watchExampleVM = new Vue({ 9 | el: '#watch-example', 10 | data: { 11 | question: '', 12 | answer: 'I cannot give you an answer until you ask a question!' 13 | }, 14 | watch: { 15 | // whenever question changes, this function will run 16 | question: function(newQuestion, oldQuestion) { 17 | this.answer = 'Waiting for you to stop typing...' 18 | this.debouncedGetAnswer() 19 | } 20 | }, 21 | created: function() { 22 | // _.debounce is a function provided by lodash to limit how 23 | // often a particularly expensive operation can be run. 24 | // In this case, we want to limit how often we access 25 | // yesno.wtf/api, waiting until the user has completely 26 | // finished typing before making the ajax request. To learn 27 | // more about the _.debounce function (and its cousin 28 | // _.throttle), visit: https://lodash.com/docs#debounce 29 | this.debouncedGetAnswer = _.debounce(this.getAnswer, 500) 30 | }, 31 | methods: { 32 | getAnswer: function() { 33 | if (this.question.indexOf('?') === -1) { 34 | this.answer = 'Questions usually contain a question mark. ;-)' 35 | return 36 | } 37 | this.answer = 'Thinking...' 38 | var vm = this 39 | axios.get('https://yesno.wtf/api') 40 | .then(function(response) { 41 | vm.answer = _.capitalize(response.data.answer) 42 | }) 43 | .catch(function(error) { 44 | vm.answer = 'Error! Could not reach the API. ' + error 45 | }) 46 | } 47 | } 48 | }) 49 | ``` 50 | 51 | ```html 52 | // Include 53 | 54 | 55 | 56 | 57 |
    58 |

    59 | Ask a yes/no question: 60 | 61 |

    62 |

    {{ answer }}

    63 |
    64 | ``` 65 | 66 | ## Demo 67 | 68 | [https://peterlamar.github.io/vue-examples/watcher/](https://peterlamar.github.io/vue-examples/watcher/) 69 | 70 | [code sandbox](https://codesandbox.io/s/o79nj388ry) 71 | 72 | ### Locally 73 | 74 | Open file index.html in a web browser 75 | -------------------------------------------------------------------------------- /6-class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    10 | 11 |
    12 |
    13 | 14 |
    15 | 16 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /6-class/readme.md: -------------------------------------------------------------------------------- 1 | # [Vue Class](https://vuejs.org/v2/guide/class-and-style.html) 2 | 3 | This demonstrates using v-bind to html classes. This is a demo intended 4 | to be understood from the console. 5 | 6 | ## Usage 7 | 8 | ```javascript 9 | var vm = new Vue({ 10 | el: '#example', 11 | data: { 12 | isActive: true, 13 | hasError: false 14 | } 15 | }) 16 | 17 | var app2 = new Vue({ 18 | el: '#app2', 19 | data: { 20 | classObject: { 21 | active: true, 22 | 'text-danger': false 23 | } 24 | } 25 | }) 26 | 27 | var app3 = new Vue({ 28 | el: '#app3', 29 | data: { 30 | isActive: true, 31 | error: null 32 | }, 33 | computed: { 34 | classObject: function () { 35 | return { 36 | active: this.isActive && !this.error, 37 | 'text-danger': this.error && this.error.type === 'fatal' 38 | } 39 | } 40 | } 41 | }) 42 | ``` 43 | 44 | ```html 45 | // Include 46 | 47 | 48 | 49 |
    51 |
    52 |
    53 |
    54 | ``` 55 | 56 | ## Demo 57 | 58 | [https://peterlamar.github.io/vue-examples/class/](https://peterlamar.github.io/vue-examples/class/) 59 | 60 | [code sandbox](https://codesandbox.io/s/l2qjk65y17) 61 | 62 | ## Demo locally 63 | 64 | Open file index.html in a web browser 65 | -------------------------------------------------------------------------------- /7-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 | 10 |

    The button above has been clicked {{ counter }} times.

    11 |
    12 |
    13 | 14 | 15 |
    16 |
    17 | 18 | 19 | 22 | 23 | 24 |
    25 | 26 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /7-events/readme.md: -------------------------------------------------------------------------------- 1 | # [Vue Events](https://vuejs.org/v2/guide/events.html) 2 | 3 | This demonstrates event functionality. Events are spawned 4 | and handled with popups in the browser. 5 | 6 | ## Usage 7 | 8 | ```javascript 9 | var example1 = new Vue({ 10 | el: '#example-1', 11 | data: { 12 | counter: 0 13 | } 14 | }) 15 | 16 | var example2 = new Vue({ 17 | el: '#example-2', 18 | data: { 19 | name: 'Vue.js' 20 | }, 21 | // define methods under the `methods` object 22 | methods: { 23 | greet: function(event) { 24 | // `this` inside methods points to the Vue instance 25 | alert('Hello ' + this.name + '!') 26 | // `event` is the native DOM event 27 | if (event) { 28 | alert(event.target.tagName) 29 | } 30 | } 31 | } 32 | }) 33 | 34 | new Vue({ 35 | el: '#example-3', 36 | methods: { 37 | say: function(message) { 38 | alert(message) 39 | }, 40 | warn: function(message, event) { 41 | // now we have access to the native event 42 | if (event) event.preventDefault() 43 | alert(message) 44 | } 45 | } 46 | }) 47 | ``` 48 | 49 | ```html 50 |
    51 | 52 |

    The button above has been clicked {{ counter }} times.

    53 |
    54 |
    55 | 56 | 57 |
    58 |
    59 | 60 | 61 | 64 | 65 | 66 |
    67 | ``` 68 | 69 | ## Demo 70 | 71 | [https://peterlamar.github.io/vue-examples/events/](https://peterlamar.github.io/vue-examples/events/) 72 | 73 | [code sandbox](https://codesandbox.io/s/pmo03ppvl0) 74 | 75 | ## Demo locally 76 | 77 | Open file index.html in a web browser 78 | -------------------------------------------------------------------------------- /8-vmodel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 |

    Keyboard Events

    10 | 11 | 12 | {{ name }}
    13 | 14 | 15 | {{ age }}
    16 |
    17 | 18 |
    19 | 20 | {{ message }}
    21 | Multiline message is: 22 |

    {{ message }}

    23 |
    24 | 25 | 26 | 27 |
    28 | 29 |
    30 | 31 | 32 | 33 | 34 | 35 | 36 |
    37 | Checked names: {{ checkedNames }} 38 |
    39 | 40 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /8-vmodel/readme.md: -------------------------------------------------------------------------------- 1 | # Vue Model 2 | 3 | This demonstrates creating v-model directive and its capabilities 4 | 5 | ## Usage 6 | 7 | ```javascript 8 | new Vue({ 9 | el: '#vue-app', 10 | data: { 11 | name: 'a', 12 | age: '' 13 | } 14 | }) 15 | 16 | new Vue({ 17 | el: '#vue-app2', 18 | data: { 19 | message: 'm', 20 | checked: '' 21 | } 22 | }) 23 | 24 | new Vue({ 25 | el: '#example-3', 26 | data: { 27 | checkedNames: [] 28 | } 29 | }) 30 | ``` 31 | 32 | ```html 33 |
    34 |

    Keyboard Events

    35 | 36 | 37 | {{ name }}
    38 | 39 | 40 | {{ age }}
    41 |
    42 | 43 |
    44 | 45 | {{ message }}
    46 | Multiline message is: 47 |

    {{ message }}

    48 |
    49 | 50 | 51 | 52 |
    53 | 54 |
    55 | 56 | 57 | 58 | 59 | 60 | 61 |
    62 | Checked names: {{ checkedNames }} 63 |
    64 | ``` 65 | 66 | ## Demo 67 | 68 | [https://peterlamar.github.io/vue-examples/vmodel/](https://peterlamar.github.io/vue-examples/vmodel/) 69 | 70 | [code sandbox](https://codesandbox.io/s/88lv4xk3l2) 71 | 72 | ### Locally 73 | 74 | Open file index.html in a web browser 75 | -------------------------------------------------------------------------------- /9-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
    7 | 8 |
    9 | 10 |
    11 | 12 | 13 |
    14 | 15 |
    16 | 21 |
    22 | 23 | 24 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /9-component/readme.md: -------------------------------------------------------------------------------- 1 | # [Vue Component](https://vuejs.org/v2/guide/components.html) 2 | 3 | This demonstrates vue component basics. It also 4 | calls an external api to show how this is accomplished 5 | within a component. 6 | 7 | ## Usage 8 | 9 | ```javascript 10 | // Define a new component called button-counter 11 | Vue.component('button-counter', { 12 | data: function () { 13 | return { 14 | count: 0 15 | } 16 | }, 17 | template: '' 18 | }) 19 | 20 | Vue.component('greeting', { 21 | template: '

    Welcome to components!

    ' 22 | }); 23 | 24 | // create a new Vue instance and mount it to our div element above with the id of app 25 | var vm = new Vue({ 26 | el: '#app' 27 | }); 28 | 29 | new Vue({ el: '#components-demo' }) 30 | 31 | Vue.component('blog-post', { 32 | props: ['title'], 33 | template: '

    {{ title }}

    ' 34 | }) 35 | 36 | new Vue({ 37 | el: '#blog-post-demo', 38 | data: { 39 | posts: [] 40 | }, 41 | created: function () { 42 | // Alias the component instance as `vm`, so that we 43 | // can access it inside the promise function 44 | var vm = this 45 | // Fetch our array of posts from an API 46 | fetch('https://jsonplaceholder.typicode.com/posts') 47 | .then(function (response) { 48 | return response.json() 49 | }) 50 | .then(function (data) { 51 | vm.posts = data 52 | }) 53 | } 54 | }) 55 | ``` 56 | 57 | ```html 58 |
    59 | 60 |
    61 | 62 |
    63 | 64 | 65 |
    66 | 67 |
    68 | 73 |
    74 | ``` 75 | 76 | ## Demo 77 | 78 | [https://peterlamar.github.io/vue-examples/component/](https://peterlamar.github.io/vue-examples/component/) 79 | 80 | [code sandbox](https://codesandbox.io/s/6zww24m5qz) 81 | 82 | ### Locally 83 | 84 | Open file index.html in a web browser 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-examples 2 | 3 | Collection of Vue.js reference examples for teaching and learning Vue. These examples assume NO experience of front end by the reader. I myself had more experience as a backend engineer and found most front end examples required too much familiarity of HTML, Javascript and the front end stack. I journaled these examples to help myself and others. 4 | 5 | The early examples 1-15, are intentionally simple while the remainder start using VUE cli and NUXT which are more sophisticated patterns (they generate complex starting projects) that it is helpful to build up to. VUE cli is what an experienced front end developer may use if they are unfamiliar with Vue and Nuxt would be used by an intermediate Vue Front End engineer as it provides more benefits as well as more complexity. 6 | 7 | ## Introduction 8 | 9 | These examples can be accessed by opening the index.html file within your browser. The related javascript and css files are referenced by this file when appropriate. This is a good way to test javascript and Vue snippets found on the web. 10 | 11 | 1. [Hello World](https://github.com/peterlamar/vue-workshop/tree/master/1-helloworld) 12 | 1. [Instance](https://github.com/peterlamar/vue-workshop/tree/master/2-instance) 13 | 1. [Vbind](https://github.com/peterlamar/vue-workshop/tree/master/3-vbind) 14 | 1. [Computed](https://github.com/peterlamar/vue-workshop/tree/master/4-computed) 15 | 1. [Watcher](https://github.com/peterlamar/vue-workshop/tree/master/5-watcher) 16 | 1. [Class](https://github.com/peterlamar/vue-workshop/tree/master/6-class) 17 | 1. [Events](https://github.com/peterlamar/vue-workshop/tree/master/7-events) 18 | 1. [Vmodel](https://github.com/peterlamar/vue-workshop/tree/master/8-vmodel) 19 | 1. [Component](https://github.com/peterlamar/vue-workshop/tree/master/9-component) 20 | 1. [ComponentMessage](https://github.com/peterlamar/vue-workshop/tree/master/10-componentmessage) 21 | 1. [ComponentDynamic](https://github.com/peterlamar/vue-workshop/tree/master/11-componentdynamic) 22 | 1. [Async](https://github.com/peterlamar/vue-workshop/tree/master/12-async) 23 | 24 | ## Charts and Graphs 25 | 26 | These are interesting if you wish to jumpstart into data visualization. 27 | 28 | 13. [Chart](https://github.com/peterlamar/vue-workshop/tree/master/13-chart) 29 | 14. [Vuechart](https://github.com/peterlamar/vue-workshop/tree/master/15-vuechart) 30 | 15. [Vuebars](https://github.com/peterlamar/vue-workshop/tree/master/15-vuebars) 31 | 32 | ## Vue CLI 33 | 34 | These examples start with the [VUE cli](https://cli.vuejs.org/) and represent the beginnings of the single page app pattern. This pattern differs from the index.html file in that javascript files are separated out into .vue files which is easier to maintain in larger projects. 35 | 36 | 16. [LocalProxy](https://github.com/peterlamar/vue-workshop/tree/master/16-localproxy) 37 | 17. [AGGrid](https://github.com/peterlamar/vue-workshop/tree/master/17-aggrid) 38 | 18. [tailwind](https://github.com/peterlamar/vue-workshop/tree/master/18-tailwind) 39 | 19. [svgdots](https://github.com/peterlamar/vue-workshop/tree/master/19-svgdots) 40 | 20. [d3connectdots](https://github.com/peterlamar/vue-workshop/tree/master/20-d3connectdots) 41 | 21. [firebasechat](https://github.com/peterlamar/vue-workshop/tree/master/21-firebase-chat) 42 | 43 | ## Nuxt 44 | 45 | The [Nuxt](https://nuxtjs.org/) project is an attempt to improve on the Vue cli by providing some common settings as defaults in the generated project. 46 | 47 | 22. [HelloNuxt](https://github.com/peterlamar/vue-workshop/tree/master/22-hellonuxt) 48 | 23. [todo-app](https://github.com/peterlamar/vue-workshop/tree/master/23-todo-app) 49 | 50 | ## Contributing 51 | 52 | If any of this is helpful to you or you wish to improve upon these examples, pull requests are absolutely welcome! 53 | 54 | ## References 55 | 56 | 1. [Mozilla DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 57 | 2. [Vue Tutorial](https://vuejs.org/v2/guide/installation.html) 58 | 3. [Babel Javascript 2015](https://babeljs.io/docs/en/learn) 59 | --------------------------------------------------------------------------------