I'm trying to build a simple web app with VueJS. Until now, I've been able to follow the documentation.
My Problem
I want to implement a generic page template that fetches the page metadata from my database.
However, pages are at the top-level of the navigation (/), so I can't use Vue route parameters to dynamically fetch the content from my database, because some of the pages have their own templates.
What I've Considered...
I've considered doing the following to get around the problem:
Implementing top-level parameter like this...
{ path: '/:slug', component: User }
..but this doesn't work for some reason.
Using a slot in the page component for the custom content, and just creating a new component for every page, but I want to stay DRY.
...but I don't want to have to create a new component for every page.
My Question
How do you implement top-level paging with a database backend in VueJS? Am I missing something simple here?
Related
By default, nuxt adds a route for each page in pages.
I want to make when going to the page e.g. project.local/id/ec29cjsa5fas512ik, the user goes to a page template and the Vue receives this ec29cjsa5fas512ik id from the url so it can make proper API calls later.
You can make a dynamic page in Nuxt2 with the following file, eg.
/pages/details/_id.vue
then you'll have a path like /details/:id.
More info can be found here: https://nuxtjs.org/docs/features/file-system-routing#dynamic-routes
I have a Laravel + Vue site that allows users to book on to training courses. A typical course URL might be www.mysite.com/courses/a-great-course. This is set up in my router.js file in the usual way:
path: '/courses/:slug',
component: Course,
name: 'course'
with the slug naturally being pulled from the database.
I have a standard vue-router catch all route defined that works fine for the first level of the URL and diverts to a Not Found page, but if I ask for a course that doesn't exist - www.mysite.com/courses/wrong-course - it still loads the page and just sits on the loading animation.
As I understand it I need to implement a navigation guard but I'm completely confused as to how to do that - it seems all the online examples deal with situations like checking if a user is authenticated in the Store.
Can anyone give me some pointers?
I am building a react blog app, I am using a functional component where I will be using some internal and external links both. For the internal links I am using Link from react-router-domwhich is working fine but for the external link I am not able to decide will an Link from react-router-dom works, which directs to the path of the external URL or an <a> tag should be fine.
The purpose of using react-router-dom is to navigate to application routes by making changes in the DOM and not reloading the whole page. This scenario is applicable to internal links.
When coming towards external links. It is something that is not the part of our application. We cannot render it our application context. So, a solution to that is using an a tag for external links.
Link is basically a wrapper of an tag with a lot of upside functionalities like,
A can know when the route it links to is active and
automatically apply an activeClassName and/or activeStyle when given
either prop.
The will be active if the current route is either the linked
route or any descendant of the linked route.
To have the link be active only on the exact linked route, use
instead or set the onlyActiveOnIndex prop.
Read the rest at https://knowbody.github.io/react-router-docs/api/Link.html
You can use the anchor tag if you plain something plain. use Link for ease of use.
In Gridsome, I am basically looking for Vue's nested route functionality (or Nuxt's child-view) to achieve something like this /:userId/profile and /:userId/posts for example. And since Gridsome uses Vue Router there should be a way to achieve this I believe
Let me try to explain what I am trying to build with Gridsome:
At mywebsite.com/ I want to show a Grid of images showing thumbnails of my video portfolio. When you then click on a thumbnail I want a modal to pop-up showing the video. The modal is semi transparent showing the portfolio in the background. So far so good.
But for people to be able to share the URL of the respective video, I need the path changing to mywebsite.com/video-1 and so on. When I then close the modal the path should be mywebsite.com/ again. This is something I already achieved within Nuxt with <child-view>.
Is there some similar functionality in Gridsome? I appreciate your help.
From the feedback you got here:
Gridsome doesn't support child routes yet. But you can kind of achieve what you want if you create a new content type called User and add each user as a node. Then generate pages for them with the Pages API. The pages you create can share a layout component.
In the same way, you can also generate pages for each video for having direct URLs to them. And use the $fetch() method to load a video in a pop-up. Or just query the videos in the front-page query instead of using $fetch().
Does anyone know how to expand this theme ( https://github.com/gilbitron/wp-rest-theme ) in order to theme specific pages? For example, I would like to create a page called "Menu" which has a unique navigation to click through to child pages Breakfast, Lunch, Dinner, etc without reload. I'm used to creating individual .php files to theme specific pages to my liking via page-{slug}.php - Is there an equivalent workflow using vue.js and wp rest api?
Instead of using page-menu.php to customize the /menu page, I would imagine I'd need to create something like a menu-page.vue file and add a custom method to specifically call that page in order to template it.
I can't find any examples of this process. Any help would be greatly appreciated.
What I did was add a field using Advanced Custom Fields that determined which template the page should use. I wrapped the display in a component called PageContent that looks like this:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
router:
'/:slug': {
component: PageContent,
name: 'Page'
}
So when someone navigates to that route, I fetch the page based on the slug param. The page variable then has a template attribute through ACF, which determines the component to display and defaults to a generic page:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
You need the WP JSON API plugin as well as the ACF plugin that adds ACF data to the json
My site uses this setup, happy to share more code if you have more questions.