Integrate Vue Flow into laravel nova #489
-
|
Hi, I'm trying to create a component for Laravel Nova that will use Vue Flow. |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 28 replies
-
|
Can you try importing the default theme as well? Also could you check if the VueFlow element is rendered into your DOM? (check with the browser devtools if the |
Beta Was this translation helpful? Give feedback.
-
|
Still empty. |
Beta Was this translation helpful? Give feedback.
-
|
Ah, you didn't add export default {
components: { VueFlow },
setup () {
const elements = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
{ id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e1-2', source: '1', target: '2', animated: true },
])
return {
elements
}
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Using components without adding them to the |
Beta Was this translation helpful? Give feedback.
-
|
Now it looks that components is loaded but styles are not renderd
I've make some change to the markup to have a container for Vue Flow. |
Beta Was this translation helpful? Give feedback.
-
|
Well if you don't import the default theme, you'll have an unstyled Flow :) |
Beta Was this translation helpful? Give feedback.
-
|
I believe that I've done it |
Beta Was this translation helpful? Give feedback.
-
|
Can you check the nodes in the dev-tools and see if the styles are present? |
Beta Was this translation helpful? Give feedback.
-
|
Path is fine as If I set "node_modules" before I got webpack compilation error and I can see styles into dev-tools. |
Beta Was this translation helpful? Give feedback.
-
|
It doesn't exists... |
Beta Was this translation helpful? Give feedback.
-
|
You have to search for the element ^^
It should look like this |
Beta Was this translation helpful? Give feedback.
-
|
I've added CSS into PHP Laravel Provider as explained in Nova manual. And now I'got the styles but look that everything is hidden ...
|
Beta Was this translation helpful? Give feedback.
-
|
It works ! The problem was first the CSS and in second time you must specify height of the container. |
Beta Was this translation helpful? Give feedback.
-
|
Vue Flow doesn't calculate any height, it just takes the height from it's wrapping element, there's no fixing that ^^ |
Beta Was this translation helpful? Give feedback.
-
|
Just so other users find the answer to this question: You need to set proper dimensions for the wrapping element of VueFlow, meaning it needs to have a width and a height, otherwise VueFlow will not work properly. |
Beta Was this translation helpful? Give feedback.
Just so other users find the answer to this question: You need to set proper dimensions for the wrapping element of VueFlow, meaning it needs to have a width and a height, otherwise VueFlow will not work properly.