Laravel Vue
Hello everyone,
I am a full-stack developer who is fascinated by the sophisticated Refine framework. Currently, I am working on a project that is being built using Laravel and Vue3. The main functionality of the project is basic CRUD and role and permission management.
I am interested in re-implementing the front-end using the Refine framework (MUI). My goal is to use the existing backend and authentication flow. I would greatly appreciate any advice on this matter.
4 Replies
Hi @edwinjackson. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hello,
Refine is indeed a great choice for building CRUD applications. It's a headless React-based framework that provides a lot of out-of-the-box functionality for rapid development, including routing, data providers, authentication, internationalization, layouts, asynchronous state management, and many others. It's also UI and backend agnostic, meaning it can integrate seamlessly with different UI frameworks and backend technologies [source (https://refine.dev/blog/react-admin-tutorial/)].
To integrate Refine with your existing Laravel and Vue3 project, you would need to add the necessary Refine dependencies to your project. Unfortunately, the extracts provided do not include specific instructions or code examples for this process. However, a user in a discussion on the Refine GitHub page suggested adding the bare minimum Refine dependencies to the template of your choice, then customizing the Refine wrapper to your liking [source (https://github.com/refinedev/refine/discussions/3343)].
As for the UI, Refine includes integrations for some component libraries and design systems, like Material UI (MUI), which you mentioned is your choice. It can also be integrated into any REST or GraphQL backend service [source (https://refine.dev/blog/react-admin-tutorial/)].
Regarding authentication, Refine has built-in support for it. You would need to handle authentication with
authProvider [source (https://refine.dev/docs/tutorial/introduction/index/)].
Please note that while Refine is a powerful tool for building CRUD applications, it's based on React, not Vue3. Therefore, you would need to be familiar with React to use Refine effectively.
For more detailed instructions and examples, I recommend checking out the Refine documentation (https://refine.dev/docs/) and tutorials (https://refine.dev/docs/tutorial/introduction/index/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1150997419916533832> kapa.ai is still learning and improving, please let us know how it did by reacting below
eastern-cyan•10mo ago
Hello @edwinjackson we'd be more than happy to help if you get stuck and ask specific questions.
I would also suggest checking data provider docs, which is data layer with your API.
https://refine.dev/docs/tutorial/understanding-dataprovider/index/
Depends on your API, you can swizzle one of our data providers and start modifying it to fit your backend:
https://refine.dev/docs/tutorial/understanding-dataprovider/swizzle/
And from here, you can see how to integrate it with refine part:
https://refine.dev/docs/api-reference/core/providers/data-provider/#usage-1
1. Data Provider | refine
The Data Provider unit is optional for the tutorial. You can directly skip to the next unit, Adding CRUD PagesAdding CRUD PagesAdding CRUD PagesAdding CRUD PagesAdding CRUD Pages, if desired
2. Create a data provider with swizzle | refine
What is swizzle?
Data Provider | refine
Data provider acts as a data layer for your app, making HTTP requests and encapsulating how the data is retrieved. The methods of these requests are then consumed by refine via data hooks.
graceful-blue•10mo ago
I appreciate your kind help.
I have been making a progress thanks to your help.