apollo VS vue-router

Is this what apollo-components is all about? https://github.com/vuejs/apollo Bulletproof is based on a REST API, so if GraphQL is the backend, this would be a great choice!

If you're set on using both Nuxt 3 and Vue Apollo, I'd recommend not using the Nuxt Apollo module, and instead integrating Vue Apollo directly: https://github.com/vuejs/vue-apollo

Cool, if you do go with graphql, I'd recommend vue-apollo on the client end. Combine with @vue/apollo-composable and graphql-codegen and it feels like sorcery.

Frontend is vuejs 2 that was scaffolded with vue-clu and is a CRUD site for the backend. I planned on using vue-apollo for the frontend to easily connect to graphql backend, I was especially excited to learn that vue-apollo handles most of the state and caching and decided to try it instead of vuex for state. I've hit a couple snags though and am beginning to think that vue-apollo isn't the right way to approach this (plus their documentation leaves much to be desired). Here's where I'm at:

You might have heard lots of buzz around GraphQL, and if you are interested in integrating it with Vue.js, then I would like to suggest you try Vue Apollo. The library makes use of Vue in the combination of GraphQL/Apollo for a smooth as well as a pleasant experience. To get startedClick here

I'm learning GraphQL and every tutorial/vid I look at in relation to using Apollo with Vue seems to involve this other package, graphql-tag. But no one ever seems to explain why it's needed, and it's not listed as a dependency of Vue Apollo. So can anyone tell me precisely why graphql-tag is needed, and whether Apollo can work with Vue without it? Essentially, is it required (and if so why isn't it listed as an Apollo dependency?) or optional?

//src/router /* eslint-disable */ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Layout from '@/layout' export const constantRoutes = [ { path: '/redirect', component: Layout, hidden: true, children: [ { path: '/redirect/:path(.*)', component: () => import('@/views/redirect/index') } ] }, { path: '/login', component: () => import('@/views/login/index'), hidden: true }, { path: '/auth-redirect', component: () => import('@/views/login/auth-redirect'), hidden: true }, { path: '/404', component: () => import('@/views/error-page/404'), hidden: true }, { path: '/401', component: () => import('@/views/error-page/401'), hidden: true }, { path: '/', component: Layout, redirect: '/dashboard', children: [ { path: 'dashboard', component: () => import('@/views/dashboard/index'), name: 'Dashboard', meta: { title: 'Dashboard', icon: 'dashboard', affix: true } } ] }, { path: '/posts', component: Layout, children: [ { path: 'index', component: () => import('@/views/posts/index'), name: 'Posts', meta: { title: 'Posts', icon: 'post', affix: true } } ] }, { path: '/profile', component: Layout, redirect: '/profile/index', hidden: true, children: [ { path: 'index', component: () => import('@/views/profile/index'), name: 'Profile', meta: { title: 'Profile', icon: 'user', noCache: true } } ] } ] /** * asyncRoutes * the routes that need to be dynamically loaded based on user roles */ export const asyncRoutes = [ // 404 page must be placed at the end !!! { path: '*', redirect: '/404', hidden: true } ] const createRouter = () => new Router({ scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) const router = createRouter() // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router } export default router

https://github.com/vuejs/vue-router/issues/703 https://github.com/vuejs/rfcs/blob/master/active-rfcs/0036-router-view-route-prop.md https://github.com/vuejs/vue-router/issues/703#issuecomment-428123334

What makes Vue particularly powerful, however, is that it can be built upon, increasing its functionality from a simple view-model library to that of a fully fledged JavaScript framework capable of powering entire SPA's via supporting plugins and libraries such as Vue Router, Vue Resource, and Vuex.

A simple src/router/index.js router based on vue-router allows you to avoid utilising the store for now (with the current project capabilities) and helps with 404 error handling.

So to start, in the land of Vue we use Vue Router for routing. It is a first party plugin and solves all your routing needs, providing both Web History and Hash based routing. Additionally, it supports nested routes and router views.

I have read through some of the content on router.vuejs.org but I can't find anything related to my issue, or I am not understanding the issue and so not sure what to look for.

Vue has a wide range of use cases that span the whole scale of front-end development. We can use it to add a bit of dynamism into an existing web app, such as adding a simple carousel or content that changes on user interaction e.g mouse movements or text input to creating complex web apps such as e-commerce stores with multiple categories and product pages supporting routing, browser-based data storage via Vue's own libraries such as the vue-router and vuex with features such as a cart, external API call requests and so forth.

We run this terminal command to enable our application to use Vue Router.

We’ll also need Vue Router for setting up the course pages.