incoperate a code from a component to another component in a vue-app?

Question

edited 2021-01-16

Hi fellow programmers!

I have a problem with my vue-wheater-app. I want to be able to add quotemachine code to my london.vue code. But I do not know how to do that in a good way. The wheather-app is functioning as I want by itself. But I do want to add a random qoute-machine to my app.
And also how do I add my quotes.js file into my code so it generates new quotes?

also my quote-app is also working by itself. I just need to get the weather app and the qoute-machine to work on the same page. I hope my problem is clear to you. otherwise just ask and I will clearify.

Help is much appreciated as always!:)

This is my wheater-app code London.vue :

     <template>
          <div id="app">
            <main>
              <h1>London</h1>
        
              <div>{{ moment(date).format("YYYY-MM-DD") }}</div>
        
              <div>
                <div v-if="weatherInfo.length != 0"></div>
        
                <p>{{ weatherInfo.main.temp }} °C</p>
              </div>
    
              <div v-for="(weather, index) in weatherInfo.weather" v-bind:key="index">
                <img
                  v-bind:src="
                    'http://openweathermap.org/img/wn/' + weather.icon + '@2x.png'
                  "/>
              </div>

              <p> "{{ currentQuote }}" </p>
                <button @click="newQuote"> New Quote</button>
            </main>
          </div>
        </template>
        <script>


new Vue({
    el: '#app',
    data: {
        quotes,
        currentQuote: quotes[0]
    }, methods: {
        newQuote: function () {
            const num = Math.floor(Math.random() * quotes.length)
            this.currentQuote = quotes[num]
        }
    }
}) 

        import axios from "axios";
        export default {
          name: "London",
          props: ["id"],
          data() {
            return {
              weatherInfo: [],
            };
          },
          mounted() {
            this.getWeather();
          },
          methods: {
            getWeather() {
              axios
                .get(
                  "https://api.openweathermap.org/data/2.5/weather?id=5695743&units=metric&appid=2acef1cd6cef64a2b6d2e405b5067512"
                )
                .then((res) => (this.weatherInfo = res.data));
            },
          },
        };
        </script>
        <style>
        </style>

This is My app.vue

 <template>
        <div id="app">
          <router-view> 
            </router-view>
            </div>
    </template>
    <script>
    </script>
    <style>
    </style>

This is my main.js

 import Vue from 'vue'
    import VueRouter from 'vue-router';
    import App from './App.vue'
    import moment from 'moment'
    import London from './components/London.vue'
    Vue.prototype.moment = moment
    Vue.use(VueRouter)
    const routes = [{
      path: '/London',
      name: 'London',
      component: London
    }, { 
    path: '/',
    component:London}]
    const router = new VueRouter({routes: routes})
    Vue.config.productionTip = false
    new Vue({
    
      router: router,
    
      render: h => h(App),
    }).$mount('#app')

This is my quotes.js

var quotes = [
    "There's nothing wrong with having a tree as a friend.",
    "The secret to doing anything is believing that you can do it. Anything that you believe you can do strong enough, you can do. Anything. As long as you believe.",
    "Anytime you learn, you gain.",
    "It’s life. It’s interesting. It’s fun."
    ];