Skip to content
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

[Vue] Introduce Vue UX component #426

Merged
merged 1 commit into from
Aug 22, 2022
Merged

[Vue] Introduce Vue UX component #426

merged 1 commit into from
Aug 22, 2022

Conversation

t-richard
Copy link
Contributor

@t-richard t-richard commented Aug 12, 2022

Q A
Bug fix? no
New feature? yes
Tickets N/A
License MIT

This PR introduces a UX Vue component which allows to render Vue.js components inside Twig templates, with the ability to pass down props to Vue components from Twig. It is implemented in the same way as the UX React component for coherence.

  1. Call registerVueControllerComponents in app.js to register Vue components
import { registerVueControllerComponents } from "@symfony/ux-vue";

registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
  1. Create Vue "controller components" (eg. Hello.vue) inside the folder specified above (here assets/vue/controllers)
// assets/vue/controllers/Hello.vue
<template>
    <h1>Hello {{ name }}</h1>
</template>
  1. All those components can now be used inside Twig using the helper function provided by the bundle, the second parameter are props that will be provided to the component
<div {{ vue_component('Hello', { name: 'Thibault' }) }}></div>

The implementation was heavily inspired by the work from @tgalopin in #329 (that's why I left him as author everywhere).

I'll gladly write docs and ux.symfony.com samples if accepted and once we agree on the API.

NB: Only Vue.js v3 is supported

@t-richard
Copy link
Contributor Author

CI fail is unrelated, I fixed it in #427

Copy link
Member

@weaverryan weaverryan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is wonderful work! Very minor comments

# Symfony UX Vue.js

Symfony UX Vue integrates [Vue.js](https://vuejs.org/) into Symfony applications.
It provides tools to render Vue.js components from Twig.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't do it until after the PR is merged (and the subtree split is setup), but we will also need to add a demo to ux.symfony.com and linking to it from here would be greta.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Passing by and reminded me one of my PR symfony/symfony-docs#16403
Could it be great to show case example of vuejs mounting with object serialized given to?
More a real ex as just passing a « name »

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm already planning to add a ux.symfony.com example (maybe in a following PR ?).

I'll link it here when ready 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great 👍🏻

src/Vue/Resources/assets/src/register_controller.ts Outdated Show resolved Hide resolved
src/Vue/README.md Outdated Show resolved Hide resolved
"keywords": [
"symfony-ux"
],
"homepage": "https://symfony.com",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can it be the ux.symfony.com ?
(I do not know the standards)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the same for all UX components at the moment. Changing this would require to update all components and not sure it's wanted

Copy link
Contributor

@tgalopin tgalopin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a great PR, thanks so much!

@t-richard
Copy link
Contributor Author

I've added docs and fixed the review comments.

I'll do the ux.symfony.com page in a separate PR.

CI is still failing due to the Chart.js error but built files are up to date for the Vue component.

@tgalopin
Copy link
Contributor

Thanks @t-richard for working on this feature, this is much appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants