vetur: Support GraphQL custom block

I have searched through existing issues
I have read through docs
I have read FAQ

Problem

Some emerging Vue frameworks, remarkably Gridsome, use GraphQL custom blocks for data pre-fetching. Nonethewise, Vetur currently doesn’t support GraphQL custom block highlighting.

A possible obstacle is that currently VS Code, by default, doesn’t include a graphql language server (for file extension gql).

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (7 by maintainers)

Commits related to this issue

Update docs for #975 — committed to vuejs/vetur by octref 4 years ago

Most upvoted comments

Here you go:

Steps:

Install one of the VS Code Graphql extensions

Have this setting:

"vetur.grammar.customBlocks": {
  "docs": "md",
  "i18n": "json",
  "page-query": "graphql"
},

Run command Vetur: Generate Grammar

+24

octref on Feb 6, 2019

The solution above worked for me…except for <static-query>. So be sure to add it after page-query, like so:

"vetur.grammar.customBlocks": {
    "docs": "md",
    "i18n": "json",
    "page-query": "graphql",
    "static-query": "graphql"
  }

+17

brianzelip on Mar 14, 2019

@dosstx You can run it via the Command Palette (Ctrl+Shift+P).

+10

leopiccionia on Apr 20, 2020

We do have custom block support, so this is not hard to do. I just need to register graphql as one of the embeddable languages.

+10

octref on Nov 26, 2018

@octref Here, <page-query> and <static-query> are custom GraphQL blocks: https://gridsome.org/docs/data-query-data

leopiccionia on Jan 10, 2019

For those wondering why it doesn’t highlight it even after applying @octref 'solution, try restarting VSCode. It didn’t work for me when I changed the setting, but after opening VSCode the next day it worked.

Berkmann18 on Dec 3, 2019