Skip to content

V3.0.0 dev #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
May 14, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
node_modules
lib
dist
/dist
.nuxt
playground/.nuxt
playground/.output

src/runtime/css/output.css

8 changes: 4 additions & 4 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# Changelog


## v2.5.5

[compare changes](https://github.com/liip/vuepal/compare/v2.5.4...v2.5.5)

### 🩹 Fixes

- Typescript issue resolved. ([7ad769b](https://github.com/liip/vuepal/commit/7ad769b))
- Typescript issue resolved.
([7ad769b](https://github.com/liip/vuepal/commit/7ad769b))

### ❤️ Contributors

@@ -19,7 +19,8 @@

### 🩹 Fixes

- Remove unwanted styles ([cf99c13](https://github.com/liip/vuepal/commit/cf99c13))
- Remove unwanted styles
([cf99c13](https://github.com/liip/vuepal/commit/cf99c13))

### ❤️ Contributors

@@ -42,4 +43,3 @@
- Ayalon <[email protected]>

## v2.5.1

File renamed without changes.
45 changes: 24 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# VuePal

VuePal provides a bridge between Drupal and Vue. It comes with a set of components and
composables to make your life easier when working with Drupal.
VuePal provides a bridge between Drupal and Vue. It comes with a set of
components and composables to make your life easier when working with Drupal.

## Frontend Routing

@@ -17,10 +17,13 @@ export default defineNuxtConfig({
})
```

With this feature enabled, you can create a static frontend page in Nuxt and still use all the routing features of
Drupal in your frontend application. You can define your aliases in the frontend page using `definePageMeta`. The module
will automatically create a Drupal configuration file that can be imported and processed by the
[Drupal frontend_routing](https://www.drupal.org/project/frontend_routing) module.
With this feature enabled, you can create a static frontend page in Nuxt and
still use all the routing features of Drupal in your frontend application. You
can define your aliases in the frontend page using `definePageMeta`. The module
will automatically create a Drupal configuration file that can be imported and
processed by the
[Drupal frontend_routing](https://www.drupal.org/project/frontend_routing)
module.

```ts [pages/static-page/example.vue]
definePageMeta({
@@ -46,8 +49,9 @@ export default defineNuxtConfig({
})
```

This option enables the `useDrupalRoute()` composable.
This composable provides the necessary GraphQL fragment and query to fetch the route data and metatags of a Drupal page.
This option enables the `useDrupalRoute()` composable. This composable provides
the necessary GraphQL fragment and query to fetch the route data and metatags of
a Drupal page.

## Admin Toolbar

@@ -61,13 +65,13 @@ export default defineNuxtConfig({
})
```

The admin toolbar component fetches the Drupal administration menu and displays it in your frontend application.
The admin toolbar component fetches the Drupal administration menu and displays
it in your frontend application.
![toolbar.png](https://github.com/liip/vuepal/blob/main/screenshots/toolbar.png)

### Usage

```vue

<template>
<ClientOnly>
<div v-if="drupalUser.accessToolbar && !isEditing">
@@ -76,16 +80,15 @@ The admin toolbar component fetches the Drupal administration menu and displays
</ClientOnly>
</template>


<script setup lang="ts">
const route = useRoute()
const drupalUser = useDrupalUser()
const language = useCurrentLanguage()
const isEditing = computed(
() =>
!!(route.query.blokkliEditing || route.query.blokkliPreview) &&
drupalUser.value.accessToolbar,
)
const route = useRoute()
const drupalUser = useDrupalUser()
const language = useCurrentLanguage()
const isEditing = computed(
() =>
!!(route.query.blokkliEditing || route.query.blokkliPreview) &&
drupalUser.value.accessToolbar,
)
</script>
```

@@ -101,11 +104,11 @@ export default defineNuxtConfig({
})
```

The local tasks component fetches the local tasks of a Drupal page and displays them in your frontend application.
The local tasks component fetches the local tasks of a Drupal page and displays
them in your frontend application.
![localtasks.png](https://github.com/liip/vuepal/blob/main/screenshots/localtasks.png)

```vue

<template>
<ClientOnly>
<div class="flex">
Loading