# Using VueJS + GraphQL to make Practical Magic

DevFeed: [Using VueJS + GraphQL to make Practical Magic](<https://devfeed.tech/articles/using-vuejs-graphql-to-make-practical-magic-31320.md>)

Original publisher: [Read original article](<https://nystudio107.com/blog/using-vuejs-graphql-to-make-practical-magic>)

Author: andrew@nystudio107.com (Andrew Welch)

Published: 2018-08-27T22:29:00Z

Content type: tutorial

Language: en

Sources: [nystudio107 | Articles on modern web development.](<https://devfeed.tech/sources/nystudio107-articles-on-modern-web-development.md>)

Topics: [GraphQL](<https://devfeed.tech/topics/graphql.md>), [vuejs](<https://devfeed.tech/topics/vuejs.md>), [Content Management System](<https://devfeed.tech/topics/cms.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [axios](<https://devfeed.tech/topics/axios.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Jamstack](<https://devfeed.tech/topics/jamstack.md>)

Tags: [auto-complete](<https://devfeed.tech/tags/auto-complete.md>), [axios](<https://devfeed.tech/tags/axios.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [craft](<https://devfeed.tech/tags/craft.md>), [everyday](<https://devfeed.tech/tags/everyday.md>), [form](<https://devfeed.tech/tags/form.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [headless](<https://devfeed.tech/tags/headless.md>), [insights](<https://devfeed.tech/tags/insights.md>), [jamstack](<https://devfeed.tech/tags/jamstack.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [like](<https://devfeed.tech/tags/like.md>), [magic](<https://devfeed.tech/tags/magic.md>), [practical](<https://devfeed.tech/tags/practical.md>), [problems](<https://devfeed.tech/tags/problems.md>), [saving](<https://devfeed.tech/tags/saving.md>), [searching](<https://devfeed.tech/tags/searching.md>), [solve](<https://devfeed.tech/tags/solve.md>), [submission](<https://devfeed.tech/tags/submission.md>), [using](<https://devfeed.tech/tags/using.md>), [vuejs](<https://devfeed.tech/tags/vuejs.md>)

## AI overview

A practical tutorial showing how to use VueJS and GraphQL with a headless Craft CMS backend to implement auto-complete search and save contact-form submissions. It introduces the frontend and backend tooling used in the examples, including Axios, Bootstrap 4, Craft CMS, and CraftQL.

## Source excerpt

Make some practical magic with VueJS + GraphQL to solve everyday problems like auto-complete searching and form submission saving with a headless Craft CMS server