Using multiple pages (components) dynamically in Vue js

Question

I am using Laravel Nova custom tool which uses vue js for custom functionalities.

There is a tool.vue file inside of the component after creation, that everything handles there. The thing is I would like to have different templates (vue files) and render them whenever they are needed.

In this case my main tool.vue is a search with dropdowns which I completely implemented. But I want to render the list of the results from a different vue file after clicking on a button. (of course the other vue file will consist of a table or something to show the data).

The question is how to handle this with vue js and how can I change between components ? and how can I pass paramters/data from the main vue file into the result page so I can do ajax requests or etc.

Answer 1

You might want to use a good router for handling the pages dynamically and in SPA format. Seems like Laravel Nova is using vue-router.

It is installed under the custom component as you create it and if you want to use other vue files or switch between them, you need to add your route under nova-components\[your-component-name]\resources\js\tool.js file by adding an object into the array of routes in this format:

{
        name: '[route-name]',
        path: '/[route-path]/:[sent-prop-name]',
        component: require('./components/[your-vue-file]'),
        props: route => {
            return {
                [sent-prop-name]: route.params.[sent-prop-name]
            }
        }
},

After adding the router to this file you can always use <router-link></router-link> component inside your Vue files to redirect to whatever route you desire (you can also send data to the route as props). The main format of it is like this:

    <router-link
                class="btn btn-default btn-primary"
                target="_blank"
                :to="{
                          name: '[destination-route-name]',
                          params: {
                                     [your-data-name]: [your-data-value]
                          }
                 }"
                 :title="__('[your-title]')"
     >

      Submit                  

     </router-link>

P.S: Of course you can omit props and params from both if you don't intend to send and receive any data to the file.

P.S: You can always take look at vue-router documentation here for more features.