Skip to content

Commit

Permalink
fix(docs): Fix Vue syntax highlighting in the Vue docs (#1017)
Browse files Browse the repository at this point in the history
The [Vue docs](https://electric-sql.com/docs/integrations/frontend/vue)
were using the `vue` syntax highlighting language, which is [not
supported by Prism](https://prismjs.com/#supported-languages).

There's open issues to support SFC syntax (see
PrismJS/prism#1665) but until then using
`html` syntax highlighting seems to do a relatively decent job as a
workaround.


before and after pics:
<img width="500" alt="Screenshot 2024-02-28 at 17 29 12"
src="https://github.com/electric-sql/electric/assets/12274098/be726ef6-dd83-493c-b459-7b4081094f2e">
<img width="500" alt="Screenshot 2024-02-28 at 17 29 00"
src="https://github.com/electric-sql/electric/assets/12274098/dec91b38-cef8-4ea3-9af5-ca362f394905">
  • Loading branch information
msfstef authored Feb 28, 2024
1 parent a2b3872 commit 8267402
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions docs/integrations/frontend/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ We provide this dynamic API rather than static `provideElectric` and `injectElec

`provideElectric` is a [provider](https://vuejs.org/api/composition-api-dependency-injection.html#provide) method that injects the Electric [Client](../../usage/data-access/client.md) instance to the rest of the app under an Electric-specific symbol key, so it will never clash with other dependency injections. You can call it within the context of a provider-like component, e.g.:

```vue
```html
// ElectricProvider.vue
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue'
Expand Down Expand Up @@ -70,7 +70,7 @@ provideElectric(electric)

With a `provideElectric` call in a parent component in place, you can then access the `electric` client instance using the `injectElectric` method, e.g.:

```vue
```html
<script lang="ts" setup>
import { ref } from 'vue'
import { injectElectric } from './electric'
Expand Down Expand Up @@ -100,7 +100,7 @@ const generate = async () => {

`useLiveQuery` sets up a live query (aka a dynamic or reactive query). This takes query function returned by one of the `db.live*` methods and keeps the results in sync whenever the relevant data changes.

```vue
```html
<script lang="ts" setup>
import { computed } from 'vue'
import { useLiveQuery } from 'electric-sql/vuejs'
Expand Down

0 comments on commit 8267402

Please sign in to comment.