├── vue.config.js ├── babel.config.js ├── public ├── favicon.ico └── index.html ├── src ├── main.js ├── components │ ├── Header.vue │ ├── Movie.vue │ ├── Search.vue │ └── App.vue └── hooks │ └── movie-api.js ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── package.json ├── CONTRIBUTING.md └── CODE_OF_CONDUCT.md /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: '' 3 | }; 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonicoder86/movie-search-vue/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueCompositionApi from '@vue/composition-api'; 3 | import App from './components/App.vue'; 4 | 5 | Vue.config.productionTip = false; 6 | Vue.use(VueCompositionApi); 7 | 8 | new Vue({ 9 | render: h => h(App), 10 | }).$mount('#app'); 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "12" 4 | before_deploy: npm run build 5 | deploy: 6 | provider: pages 7 | local_dir: dist 8 | skip_cleanup: true 9 | github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable 10 | keep_history: true 11 | on: 12 | branch: master 13 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | movie-search-vue 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/Movie.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | -------------------------------------------------------------------------------- /src/hooks/movie-api.js: -------------------------------------------------------------------------------- 1 | import { reactive, watch } from '@vue/composition-api'; 2 | const API_KEY = 'a5549d08'; 3 | 4 | export const useMovieApi = () => { 5 | const state = reactive({ 6 | search: 'Joker', 7 | loading: true, 8 | movies: [] 9 | }); 10 | 11 | watch(() => { 12 | const MOVIE_API_URL = `https://www.omdbapi.com/?s=${state.search}&apikey=${API_KEY}`; 13 | 14 | fetch(MOVIE_API_URL) 15 | .then(response => response.json()) 16 | .then(jsonResponse => { 17 | state.movies = jsonResponse.Search; 18 | state.loading = false; 19 | }); 20 | }); 21 | 22 | return state; 23 | }; 24 | -------------------------------------------------------------------------------- /src/components/Search.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Gábor Soós 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # movie-search-vue 2 | 3 | [![Build Status](https://travis-ci.com/blacksonic/movie-search-vue.svg?branch=master)](https://travis-ci.com/blacksonic/movie-search-vue) 4 | [![Dependencies Status](https://david-dm.org/blacksonic/movie-search-vue/status.svg)](https://david-dm.org/blacksonic/movie-search-vue) 5 | 6 | A movie search application showcasing the new Composition API of Vue 3. 7 | 8 | The application is based on Vue 2 and uses the [Composition API](https://vue-composition-api-rfc.netlify.com/) 9 | with the [@vue/composition-api](https://github.com/vuejs/composition-api) plugin. 10 | 11 | For the tutorial, read the article on [DEV.to](https://dev.to/blacksonic/build-a-movie-search-app-using-the-vue-composition-api-5218). 12 | 13 | [Try it out with online editing](https://codesandbox.io/s/github/blacksonic/movie-search-vue) 14 | 15 | ## Usage 16 | 17 | After installing the dependencies the following NPM scripts become available: 18 | 19 | - `start`: starts the application in development mode on [http://localhost:8080](http://localhost:8080) 20 | - `build`: bundles the application for production into the `dist` folder 21 | - `lint`: lint files with [ESLint](https://eslint.org/) 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movie-search-vue", 3 | "license": "MIT", 4 | "repository": { 5 | "type": "git", 6 | "url": "git+https://github.com/blacksonic/movie-search-vue.git" 7 | }, 8 | "scripts": { 9 | "start": "vue-cli-service serve", 10 | "build": "vue-cli-service build", 11 | "lint": "vue-cli-service lint", 12 | "test": "echo 'Not implemented'" 13 | }, 14 | "dependencies": { 15 | "@vue/composition-api": "^1.0.0-beta.22", 16 | "core-js": "^3.8.1", 17 | "vue": "^2.6.12" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^4.5.9", 21 | "@vue/cli-plugin-eslint": "^4.5.9", 22 | "@vue/cli-service": "^4.5.9", 23 | "babel-eslint": "^10.1.0", 24 | "eslint": "^7.16.0", 25 | "eslint-plugin-vue": "^7.3.0", 26 | "vue-template-compiler": "^2.6.12" 27 | }, 28 | "eslintConfig": { 29 | "root": true, 30 | "env": { 31 | "node": true 32 | }, 33 | "extends": [ 34 | "plugin:vue/essential", 35 | "eslint:recommended" 36 | ], 37 | "rules": {}, 38 | "parserOptions": { 39 | "parser": "babel-eslint" 40 | } 41 | }, 42 | "postcss": { 43 | "plugins": { 44 | "autoprefixer": {} 45 | } 46 | }, 47 | "browserslist": [ 48 | "> 1%", 49 | "last 2 versions" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Issues 4 | 5 | Issues are very valuable to this project. 6 | 7 | * Ideas are a valuable source of contributions others can make 8 | * Problems show where this project is lacking 9 | * With a question you show where contributors can improve the user experience 10 | 11 | Thank you for creating them. 12 | 13 | ## Pull Requests 14 | 15 | Pull requests are, a great way to get your ideas into this repository. 16 | 17 | When deciding if I merge in a pull request I look at the following things: 18 | 19 | ### Does it state intent 20 | 21 | You should be clear which problem you're trying to solve with your contribution. 22 | 23 | For example: 24 | 25 | > Add link to code of conduct in README.md 26 | 27 | Doesn't tell me anything about why you're doing that 28 | 29 | > Add link to code of conduct in README.md because users don't always look in the CONTRIBUTING.md 30 | 31 | Tells me the problem that you have found, and the pull request shows me the action you have taken to solve it. 32 | 33 | 34 | ### Is it of good quality 35 | 36 | * There are no spelling mistakes 37 | * It reads well 38 | * For english language contributions: Has a good score on [Grammarly](grammarly.com) or [Hemingway App](http://www.hemingwayapp.com/) 39 | 40 | ### Does it move this repository closer to my vision for the repository 41 | 42 | The aim of this repository is: 43 | 44 | * To provide a README.md and assorted documents anyone can copy and paste, into their project 45 | * The content is usable by someone who hasn't written something like this before 46 | * Foster a culture of respect and gratitude in the open source community. 47 | 48 | ### Does it follow the contributor covenant 49 | 50 | This repository has a [code of conduct](CODE_OF_CONDUCT.md), This repository has a code of conduct, I will remove things that do not respect it. 51 | -------------------------------------------------------------------------------- /src/components/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 34 | 35 | 151 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at soos.gabor86@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | --------------------------------------------------------------------------------