This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
npm installInstall dependenacies contains of: npm install vue, vue-vite, axios, buffer, moment, vue-router --save Then, import { ref, computed, watchEffect } from 'vue' import axios from 'axios' import { Buffer } from 'buffer' import monment from 'moment' import useRouter from 'vue-route'
In addition, it is necessary to import external url from http-common.js and external weather information from WeatherCard.vue shown as follows: import url from './http-common.js' import WeatherCard from './components/WeatherCard.vue';
npm run devnpm run build- Please try to look for an appropriate free movie API, such as https://rapidapi.com/juanroldan1989/api/moviequotes/ to register a user account and get a free API key, e.g. 'https://juanroldan1989-moviequotes-v1.p.rapidapi.com/api/v1/quotes' and then place the url link, which is provided by the website of https://rapidapi.com, into below statement in the file of http-common.js for fetching what movie you want with the input title const url = "https://xxxxFREE_MOVIE_API"
- Please go to Open Weather website of r opening a new user account and get API Key for your own account; then,place your own API Key
and url link of the openweather into below statements in the file of WeatherCard.js
const apiKey = "XXXXXXXXXXXX"; //Go to OpenWeather website for registering your own account for getting API Key
const apiUrl =
https://api.openweathermap.org/data/2.5/weather?q=${this.location}&units=metric&appid=${apiKey}; - Please go to the website of https://www.omdbapi.com/ for opening your own user account and get your own API Key; then, place API Key and url link into below enpoint statements in the file of staff.js
- endpoint =
https://www.omdbapi.com/?s=${searchTerm.value}&apikey=XXXXXX; //Please go to a free movie API website for getting your own API Key - enddpoint =
https://www.omdbapi.com/?t=${searchTerm.value}&y=${Yearsearch.value}&apikey=XXXXXX; //Please go to a free movie API website for getting your own API Key - Go to MongoDB webstie for registering a new user account and then creat a new collection under your own Database and get your own API Key for showing all movies on Home page.
[Youtube link] (https://youtu.be/89ntFfa6a3M)