Using multiple pages (components) dynamically in Vue js
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.
javascript laravel vue.js vuejs2 laravel-nova
asked Nov 12 at 10:56
sobbe
7621832
add a comment |
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.
javascript laravel vue.js vuejs2 laravel-nova
asked Nov 12 at 10:56
sobbe
7621832
I have the same problem. Can't seem to find a solution.
– Fawzan
Nov 21 at 2:07
@Fawzan I found the solution. posting answer!
– sobbe
Nov 21 at 13:38
add a comment |
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.
javascript laravel vue.js vuejs2 laravel-nova
asked Nov 12 at 10:56
sobbe
7621832
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.
javascript laravel vue.js vuejs2 laravel-nova
javascript laravel vue.js vuejs2 laravel-nova
asked Nov 12 at 10:56
sobbe
7621832
asked Nov 12 at 10:56
sobbe
7621832
edited Nov 21 at 13:39
asked Nov 12 at 10:56
sobbe
7621832
asked Nov 12 at 10:56
sobbe
7621832
asked Nov 12 at 10:56
sobbe
7621832
7621832
I have the same problem. Can't seem to find a solution.
– Fawzan
Nov 21 at 2:07
@Fawzan I found the solution. posting answer!
– sobbe
Nov 21 at 13:38
add a comment |
I have the same problem. Can't seem to find a solution.
– Fawzan
Nov 21 at 2:07
@Fawzan I found the solution. posting answer!
– sobbe
Nov 21 at 13:38
I have the same problem. Can't seem to find a solution.
– Fawzan
Nov 21 at 2:07
I have the same problem. Can't seem to find a solution.
– Fawzan
Nov 21 at 2:07
@Fawzan I found the solution. posting answer!
– sobbe
Nov 21 at 13:38
@Fawzan I found the solution. posting answer!
– sobbe
Nov 21 at 13:38
add a comment |
1 Answer
1
active
oldest
votes
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]resourcesjstool.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.
answered Nov 21 at 13:59
sobbe
7621832
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53260662%2fusing-multiple-pages-components-dynamically-in-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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]resourcesjstool.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.
answered Nov 21 at 13:59
sobbe
7621832
add a comment |
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]resourcesjstool.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.
answered Nov 21 at 13:59
sobbe
7621832
add a comment |
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]resourcesjstool.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.
answered Nov 21 at 13:59
sobbe
7621832
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]resourcesjstool.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.
answered Nov 21 at 13:59
sobbe
7621832
answered Nov 21 at 13:59
sobbe
7621832
answered Nov 21 at 13:59
sobbe
7621832
answered Nov 21 at 13:59
sobbe
7621832
7621832
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53260662%2fusing-multiple-pages-components-dynamically-in-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I have the same problem. Can't seem to find a solution.
– Fawzan
Nov 21 at 2:07
@Fawzan I found the solution. posting answer!
– sobbe
Nov 21 at 13:38