Nuxt apollo plugin

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. You can either in a simple setup just add an object as described above.

If you need to overwrite cache or the default getAuth function then use a path to your config file which returns the client config options. Sets up the apollo client endpoints. All available options for each endpoint you find here. Check out official vue-apollo-cli where possible usecases are presented. Token name for the cookie which will be set in case of authentication.

You can also provide an option tokenName in each of your clientConfigs to overwrite the default. When each request is made, the value of whatever is in this cooke will be sent in an "Authorization" HTTP header as specified by authenticationType below. Sets the authentication type for any authorized request. Authorization: Bearer abc If your backend requires an Authorization header in the format "Authorization: ", without any prefix, then you should set this value to an empty string.

Once the setup is completed you have a successfully enabled vue-apollo in your project. Checkout Official example and vue-apollo how to use vue-apollo inside your application code.

Check out the full example. For permanent authorization tokens the setup just provide getAuth function for each of your endpoint configurations:. Once you get the client, you can access its methods and properties. See API Reference. See vue-apollo documentation for more information on smart queries. Version 4 of this module leaves you with zero configuration. This means we use the best possible approach available from vue-cli-plugin-apollo and the same configuration behaviour. This means you don't need to wire up your own configuration, simply pass.A few weeks ago, I was thinking about my own Internet habit and, more specifically, about what I really like when I chill out reading stuff.

Blogging is excellent to let you share experiences, beliefs, or testimonials. And Strapi is useful at helping you create your blog! So, I am pretty sure that you now understand what this post is about. If you are familiar with our blog you must have seen that we've released a series of tutorials on how to make blogs using Strapi with a lot of frontend frameworks: Gatsby OldGatsby newReactNext.

To follow this tutorial, you'll need to have Strapi and Nuxt installed on your computer, but don't worry, we are going to install these together! So that's the easy part, since the beta. This single command line will create all you need for your back-end.

Now that you know that we need to install some plugins to enhance your app, let's install one of our most popular. The graphql plugin:. Once the installation is completed, you can finally start your Strapi server strapi dev and create your first Administrator. That's the one that has all the rights in your application, so please make sure to enter a proper password password is really not safe Note: The terminal will prompt for some details about your project.

As they are not really relevant to our blog, you can ignore them. I strongly advise you to read the documentation, though.

nuxt apollo plugin

So go ahead, enjoy yourself, and press enter all the way! Again, once the installation is over, you can start your front-end app to make sure everything went ok. No need of the graphql plugin install since we already did it in the backend setup plus it's more consistent this way.

We'll also need to use an env variable for our Strapi base url, we will instantiate it in our nuxt. UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

Now you need to initialize UIkit's Js in your Nuxt application. You are going to do this by creating a plugin.You can either in a simple setup just add an object as described above. If you need to overwrite cache or the default getAuth function then use a path to your config file which returns the client config options.

Sets up the apollo client endpoints. All available options for each endpoint you find here. Check out official vue-apollo-cli where possible usecases are presented. Token name for the cookie which will be set in case of authentication.

You can also provide an option tokenName in each of your clientConfigs to overwrite the default. When each request is made, the value of whatever is in this cooke will be sent in an "Authorization" HTTP header as specified by authenticationType below. Sets the authentication type for any authorized request.

Authorization: Bearer abc Once the setup is completed you have a successfully enabled vue-apollo in your project. Checkout Official example and vue-apollo how to use vue-apollo inside your application code. Check out the full example. For permanent authorization tokens the setup just provide getAuth function for each of your endpoint configurations:. Once you get the client, you can access its methods and properties.

Nuxt + TypeScript + Apollo: a bumpy road

See API Reference. See vue-apollo documentation for more information on smart queries. Version 4 of this module leaves you with zero configuration.

This means we use the best possible approach available from vue-cli-plugin-apollo and the same configuration behaviour. This means you don't need to wire up your own configuration, simply pass. Version 3 of this module is using apollo-client 2. CORS errors are most often resolved with proxies. If you see a Cross-Origin-Request error in your client side console look into setting up a proxy. This is just a placeholder. You'll want to replace it with whatever storage mechanism you choose to store your token.

In index. Last updated 4 months ago by kieusonlam. Apollo inside of NuxtJS Nuxt. For example: npm install --save vue 2.Note : Since Nuxt. Note that the css was imported as per Ant Design Documentation. All the paths defined in the plugins property will be imported before initializing the main application. Every time you need to use Vue. To learn more how to use the plugins, see the guide documentation. Caught a mistake or want to contribute to the documentation?

Edit this page on GitHub! Platinum Sponsors. Essential Context. Pages asyncData fetch head key layout loading middleware scrollToTop transition validate watchQuery. Components nuxt nuxt-child nuxt-link client-only. Configuration build buildDir cli css dev dir env extendPlugins generate globalName head hooks ignore loading loadingIndicator mode modern modules modulesDir plugins render rootDir router server serverMiddleware srcDir transition vue.

Type: Array Items: String or Object If the item is an object, the properties are: src: String path of the file mode: String can be client or server If defined, the file will be included only on the respective client or server side. Note : Old version Type: Array Items: String or Object If the item is an object, the properties are: src: String path of the file ssr: Boolean default to true If false, the file will be included only on the client-side.

The plugins property lets you add vue. Example nuxt. When do I use plugins? Platinum Sponsors Support Us.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project?

Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. In the times I've used vanilla Apollo, I pass an Authorization header via the network interface opts. This is how the API authorizes graphql access.

I can do that using Nuxt, but I've only gotten as far as hardcoding the token into nuxt. For instance:. Server-side, how can I dynamically set the network interface options? For instance, setting the Bearer token from a cookie sent in the request. In a previous version of Nuxt, I was able to do that using a custom auth middleware cookie.

Once the app hits the browser, if the user's token is stored in local storage, how would I update the network interface with the new options? I was able to apply a middleware to an Apollo client anywhere context is available.

Here is an example within middleware:. I only have authorization to the token on the client side at the moment. You can follow the progress here: 6. Hey frankspin89 happy to share what I've done so far with this. Maybe we can help each other. A little context:. I used a middleware, which would instantiate an Apollo client made available throughout the app via setting context. If that cookie didn't exists, the app assumed you were logged out.

Once you've authenticated, the cookie was set. This worked well, and basically behaved like a conventional session cookie. Once the app hits the browser, it needs the token for browser-based API calls. You could put the token in local storage, but that seems unnecessary to me, as you're essentially storing the token in two places once as an HTTP Only cookie, and once in local storage.

Rather, since you have the token server-side, simply pass down to the browser app via the initial store state. The token would be in the store upon app load assuming you're authenticated. Then, the same middleware I used before now context. My attempts to use this module, lead me to want to tweak my Nuxt middleware to apply an Apollo middleware; rather than create a new Apollo instance.

I've gotten that to work, which provides server-side and client-side authentication. Middleware provides both. So if you want to use this module, you can instantiate a default client, then apply an Apollo middleware see above. I also looked into nuxtServerInitbut ran into issues with that I don't recall what the issue was with that. Also worth noting, I've seen code snippets referring to req.

I'm not really sure what this is, maybe something I should have looked into Not sure if this is the right approach but it works for me pretty good: authenticateApolloMiddleware. Yeah, that's basically where I settled with my implementation.

Only difference is that I didn't use nuxtServerInit.Nuxt, TypeScript, and Apollo. You've probably heard awesome things about all three. So what would be more awesome than using the 3 of them together, right? I must admit, I'm not a big fan of TypeScript, but I've been wanting to try using it with Nuxt for some time now. I've tried unsuccessfully a couple of times because the lack of documentation makes it difficult to use it in a real project.

But recently a great opportunity came up: an internal project, no client that needs a final product right away, complete freedom to choose the technologies we want. Let's assume you already have your Nuxt project set up if you don't, you can follow the instructions here. No issues here! If you want linting who doesn't? I lost a lot of time because of that.

First bump! My final ESlint config with Prettier looks like this:. I recommend disabling the default error overlay that appears when there is a lint issue, as it can be really annoying while developing the app. Instead, it's better and more practical to rely on CI tools or git hooks to make sure no linting errors leak to production, and the errors will still appear on the console and in your terminal.

You can disable the overlay by adding this to build in your nuxt. Now, let's start building our app! My first approach was using the options API, as it's what I'm used to and I thought it would create less friction. Everything was more or less working like a regular Nuxt.

If you are not familiar with it, it's like dataa function that allows us to set our component's state, but asynchronously. You can use both of them and they will merge, so if you set up the variable foo with data and bar with asyncDatayou are able to use this. But sadly, that's not the case when using TypeScript. While TypeScript can infer correctly the types of datacomputedetc; that's not the case with asyncData.

So the following code, which would be what a regular Nuxt developer might do, will raise an error:.

nuxt apollo plugin

If you want to make this work with the options API, the only way is to declare the state type in the data function as well:. Needless to say, this makes both writing and reading the code cumbersome, and can lead to errors if you type data and asyncData differently.

It kind of loses the point of using TypeScript. You still need the double typing, but at least it's a bit less cumbersome. This, along with the fact that there are many more examples online of people using the class API, made me ditch the options API in favor of this approach.

Subscribe to RSS

I'd prefer to use the composition API since it seems that it's where Vue is headed, but I also found very little documentation and examples, and don't want to keep finding so many bumps! Another annoying detail I've found is when working with props. In regular JavaScript, you can declare props with their type, set if they are required or not, and a default value, like this:.

This is useful because you get actual errors in your console if you mess up and pass the wrong type. In order to get both errors on runtime and type checking with TypeScript, you need to double type again:. I understand fixing those things might be really hard, as TypeScript with Vue and Nuxt is not a core feature like it is with Angular, so this is in no way trying to diminish the hard work done by the Nuxt team.

Just a heads up to not expect the robustness you might be used to when working with pure TypeScript or Angular, at least for now. You also need to add an apollo object with your configuration. You can find all the options in the docsbut the only required field is httpEndpointso you'll likely end up with a configuration that looks like this:.

Now, let's finally write some queries, right? I prefer to have all the queries in a. However, if we try to import them to our Vue components, we'll see that TypeScript does not recognize them as modules.Nuxt is based on a powerful modular architecture. You can choose from more than 50 modules to make your development faster and easier.

You don't have to reinvent the wheel to get PWA benefits, add Google Analytics to your page or generate a sitemap. With Nuxt. We do our best to build performant applications by utilizing Vue. To squeeze every unnecessary bit out of your app Nuxt includes a bundle analyzer and lots of opportunities to fine-tune your app. Our main focus is the Developer Experience.

nuxt apollo plugin

We love Nuxt. If questions or problems come up, our helpful community will help you out. The most popular mode for Nuxt.

With SSR, also called "universal" or "isomorphic" mode, a Node. Because implementing SSR on your own can be really tedious, Nuxt. Instead of switching to another framework and spending time to get used to it, why not kill two birds with one stone? It is the "best of both worlds" as you don't need a server but still have SEO benefits because Nuxt will pre-render all pages and include the necessary HTML. Also, you can deploy the resulting page easily to Netlify or GitHub pages. Are you slowly transitioning your app and want to start lightweight?

Then the traditional SPA mode will likely be your choice. The outcome will be a typical Vue SPA as you know it but influenced by your Nuxt configuration and the framework itself. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

If you run a business and are using Nuxt in a revenue-generating product, it makes business sense to sponsor Nuxt development: it ensures the project that your product relies on stays healthy and actively maintained. If you are an individual user and have enjoyed the productivity of using Nuxt, consider donating as a sign of appreciation. The Progressive Vue.

An open source framework making web development simple and powerful. Loading video


comments

Leave a Reply