├── .editorconfig
├── .gitignore
├── README.md
├── assets
    └── README.md
├── components
    ├── AppHeader.vue
    ├── Joke.vue
    ├── README.md
    └── SearchJokes.vue
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── Jokes
    │   ├── _id
    │   │   └── index.vue
    │   └── index.vue
    ├── README.md
    ├── about.vue
    └── index.vue
├── plugins
    └── README.md
├── static
    ├── README.md
    └── favicon.ico
└── store
    └── README.md


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


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Dad Jokes
 2 | 
 3 | > Nuxt.js app that ists corny dad jokes. Uses the [icanhazdadjoke.com API](https://icanhazdadjoke.com/api)
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ```bash
 8 | # install dependencies
 9 | $ npm install
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ npm run dev
13 | 
14 | # build for production and launch server
15 | $ npm run build
16 | $ npm start
17 | 
18 | # generate static project
19 | $ npm run generate
20 | ```
21 | 
22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
23 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="header">
 3 |     <h1 class="title">Dad Jokes</h1>
 4 |     <ul>
 5 |       <li>
 6 |         <nuxt-link to="/">Home</nuxt-link>
 7 |       </li>
 8 |       <li>
 9 |         <nuxt-link to="/jokes">Jokes</nuxt-link>
10 |       </li>
11 |       <li>
12 |         <nuxt-link to="/about">About</nuxt-link>
13 |       </li>
14 |     </ul>
15 |   </header>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: "AppHeader"
21 | };
22 | </script>
23 | 
24 | <style>
25 | .header {
26 |   display: flex;
27 |   justify-content: space-between;
28 |   align-items: center;
29 |   margin-bottom: 1rem;
30 |   padding-bottom: 1rem;
31 |   border-bottom: 1px dotted #ccc;
32 | }
33 | 
34 | .header .title {
35 |   font-size: 3rem;
36 |   color: #526488;
37 | }
38 | 
39 | .header ul {
40 |   display: flex;
41 | }
42 | 
43 | .header a {
44 |   display: inline-block;
45 |   background: #333;
46 |   color: #fff;
47 |   padding: 0.3rem 1rem;
48 |   margin-right: 0.5rem;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/components/Joke.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nuxt-link :to="'jokes/' + id">
 3 |     <div class="joke">
 4 |       <p>{{ joke }}</p>
 5 |     </div>
 6 |   </nuxt-link>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "Joke",
12 |   props: ["joke", "id"]
13 | };
14 | </script>
15 | 
16 | <style>
17 | .joke {
18 |   padding: 1rem;
19 |   border: 1px dotted #ccc;
20 |   margin: 1rem 0;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/components/SearchJokes.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="onSubmit">
 3 |     <input type="text" v-model="text" placeholder="Search Jokes...">
 4 |     <input type="submit" value="Search Jokes">
 5 |   </form>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: "SearchJokes",
11 |   data() {
12 |     return {
13 |       text: ""
14 |     };
15 |   },
16 |   methods: {
17 |     onSubmit() {
18 |       this.$emit("search-text", this.text);
19 |       this.text = "";
20 |     }
21 |   }
22 | };
23 | </script>
24 | 
25 | <style>
26 | </style>
27 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <AppHeader/>
 4 |     <nuxt/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import AppHeader from "../components/AppHeader";
10 | 
11 | export default {
12 |   components: {
13 |     AppHeader
14 |   }
15 | };
16 | </script>
17 | 
18 | 
19 | <style>
20 | * {
21 |   box-sizing: border-box;
22 |   margin: 0;
23 |   padding: 0;
24 | }
25 | 
26 | body {
27 |   font-family: Arial, Helvetica, sans-serif;
28 |   font-size: 1rem;
29 |   line-height: 1.6;
30 |   background: #f4f4f4;
31 | }
32 | 
33 | a {
34 |   color: #666;
35 |   text-decoration: none;
36 | }
37 | 
38 | ul {
39 |   list-style: none;
40 | }
41 | 
42 | .container {
43 |   max-width: 800px;
44 |   margin: 2rem auto;
45 |   overflow: hidden;
46 |   padding: 1rem 2rem;
47 |   background: #fff;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import pkg from './package'
 2 | 
 3 | export default {
 4 |   mode: 'universal',
 5 | 
 6 |   /*
 7 |   ** Headers of the page
 8 |   */
 9 |   head: {
10 |     title: pkg.name,
11 |     meta: [
12 |       { charset: 'utf-8' },
13 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
14 |       { hid: 'description', name: 'description', content: pkg.description }
15 |     ],
16 |     link: [
17 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
18 |     ]
19 |   },
20 | 
21 |   /*
22 |   ** Customize the progress-bar color
23 |   */
24 |   loading: { color: '#fff' },
25 | 
26 |   /*
27 |   ** Global CSS
28 |   */
29 |   css: [
30 |   ],
31 | 
32 |   /*
33 |   ** Plugins to load before mounting the App
34 |   */
35 |   plugins: [
36 |   ],
37 | 
38 |   /*
39 |   ** Nuxt.js modules
40 |   */
41 |   modules: [
42 |     // Doc: https://axios.nuxtjs.org/usage
43 |     '@nuxtjs/axios',
44 |   ],
45 |   /*
46 |   ** Axios module configuration
47 |   */
48 |   axios: {
49 |     // See https://github.com/nuxt-community/axios-module#options
50 |   },
51 | 
52 |   /*
53 |   ** Build configuration
54 |   */
55 |   build: {
56 |     /*
57 |     ** You can extend webpack config here
58 |     */
59 |     extend(config, ctx) {
60 |     }
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dadjokes",
 3 |   "version": "1.0.0",
 4 |   "description": "Lists bad dad jokes",
 5 |   "author": "Brad Traversy",
 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.4.0",
16 |     "@nuxtjs/axios": "^5.3.6"
17 |   },
18 |   "devDependencies": {
19 |     "nodemon": "^1.18.9"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/Jokes/_id/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt-link to="/jokes">Back To Jokes</nuxt-link>
 4 |     <h2>{{ joke }}</h2>
 5 |     <hr>
 6 |     <small>Joke ID: {{ $route.params.id }}</small>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import axios from "axios";
12 | 
13 | export default {
14 |   data() {
15 |     return {
16 |       joke: {}
17 |     };
18 |   },
19 |   async created() {
20 |     const config = {
21 |       headers: {
22 |         Accept: "application/json"
23 |       }
24 |     };
25 | 
26 |     try {
27 |       const res = await axios.get(
28 |         `https://icanhazdadjoke.com/j/${this.$route.params.id}`,
29 |         config
30 |       );
31 | 
32 |       this.joke = res.data.joke;
33 |     } catch (err) {
34 |       console.log(err);
35 |     }
36 |   },
37 |   head() {
38 |     return {
39 |       title: this.joke,
40 |       meta: [
41 |         {
42 |           hid: "description",
43 |           name: "description",
44 |           content: "Best place for corny dad jokes"
45 |         }
46 |       ]
47 |     };
48 |   }
49 | };
50 | </script>
51 | 
52 | <style>
53 | </style>
54 | 


--------------------------------------------------------------------------------
/pages/Jokes/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <SearchJokes v-on:search-text="searchText"/>
 4 |     <Joke v-for="joke in jokes" :key="joke.id" :id="joke.id" :joke="joke.joke"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import axios from "axios";
10 | import Joke from "../../components/Joke";
11 | import SearchJokes from "../../components/SearchJokes";
12 | 
13 | export default {
14 |   components: {
15 |     Joke,
16 |     SearchJokes
17 |   },
18 |   data() {
19 |     return {
20 |       jokes: []
21 |     };
22 |   },
23 |   async created() {
24 |     const config = {
25 |       headers: {
26 |         Accept: "application/json"
27 |       }
28 |     };
29 | 
30 |     try {
31 |       const res = await axios.get("https://icanhazdadjoke.com/search", config);
32 | 
33 |       this.jokes = res.data.results;
34 |     } catch (err) {
35 |       console.log(err);
36 |     }
37 |   },
38 |   methods: {
39 |     async searchText(text) {
40 |       const config = {
41 |         headers: {
42 |           Accept: "application/json"
43 |         }
44 |       };
45 | 
46 |       try {
47 |         const res = await axios.get(
48 |           `https://icanhazdadjoke.com/search?term=${text}`,
49 |           config
50 |         );
51 | 
52 |         this.jokes = res.data.results;
53 |       } catch (err) {
54 |         console.log(err);
55 |       }
56 |     }
57 |   },
58 |   head() {
59 |     return {
60 |       title: "Dad Jokes",
61 |       meta: [
62 |         {
63 |           hid: "description",
64 |           name: "description",
65 |           content: "Best place for corny dad jokes"
66 |         }
67 |       ]
68 |     };
69 |   }
70 | };
71 | </script>
72 | 
73 | <style>
74 | </style>
75 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>About DadJokes</h1>
 4 |     <p>This is an app that displays corny dad jokes</p>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   head() {
11 |     return {
12 |       title: "About The App",
13 |       meta: [
14 |         {
15 |           hid: "description",
16 |           name: "description",
17 |           content: "Best place for corny dad jokes"
18 |         }
19 |       ]
20 |     };
21 |   }
22 | };
23 | </script>
24 | 
25 | <style>
26 | </style>
27 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Welcome to the best corny dad jokes app on the web</h2>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   head() {
10 |     return {
11 |       title: "Welcome To Dad Jokes",
12 |       meta: [
13 |         {
14 |           hid: "description",
15 |           name: "description",
16 |           content: "Best place for corny dad jokes"
17 |         }
18 |       ]
19 |     };
20 |   }
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/nuxt_dadjokes/dad2e4adeb7bff3052ddbfec752efb1dce2159d3/static/favicon.ico


--------------------------------------------------------------------------------
/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 | 


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