{"id":2638,"date":"2024-03-22T07:52:13","date_gmt":"2024-03-21T23:52:13","guid":{"rendered":"https:\/\/five.co\/?p=2638"},"modified":"2024-03-22T10:01:07","modified_gmt":"2024-03-22T02:01:07","slug":"build-your-laravel-user-interface","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/build-your-laravel-user-interface\/","title":{"rendered":"Build Your Laravel User Interface Today"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Building Your First Laravel User Interface (Step-by-Step Guide)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Building a modern web application often requires integrating a front-end user interface with a back-end framework. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Laravel, a popular PHP web application framework, provides a solid foundation for building robust and scalable applications. However, to create an engaging and interactive user experience, you&#8217;ll need to combine Laravel with a front-end JavaScript framework or library. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This comprehensive step-by-step guide walks you through the process of building your first Laravel user interface, covering everything from setting up the project to integrating a front-end framework like Vue.js, and deploying the application for production. <\/p>\n\n\n<div class=\"root-eb-toc-dg2kgth wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-dg2kgth \"><div class=\"eb-toc-container eb-toc-dg2kgth  eb-toc-is-not-sticky eb-toc-not-collapsible eb-toc-initially-not-collapsed eb-toc-scrollToTop style-1 list-style-none\" data-scroll-top=\"false\" data-scroll-top-icon=\"fas fa-angle-up\" data-collapsible=\"false\" data-sticky-hide-mobile=\"false\" data-sticky=\"false\" data-scroll-target=\"scroll_to_toc\" data-copy-link=\"false\" data-editor-type=\"\" data-hide-desktop=\"false\" data-hide-tab=\"false\" data-hide-mobile=\"false\" data-itemcollapsed=\"false\" data-highlight-scroll=\"false\"><div class=\"eb-toc-header\"><h2 class=\"eb-toc-title\">Table of Contents<\/h2><\/div><div class=\"eb-toc-wrapper \" data-headers=\"[{&quot;level&quot;:2,&quot;content&quot;:&quot;Building Your First Laravel User Interface (Step-by-Step Guide)&quot;,&quot;text&quot;:&quot;Building Your First Laravel User Interface (Step-by-Step Guide)&quot;,&quot;link&quot;:&quot;building-your-first-laravel-user-interface-step-by-step-guide&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Set Up a New Laravel Project&quot;,&quot;text&quot;:&quot;Set Up a New Laravel Project&quot;,&quot;link&quot;:&quot;set-up-a-new-laravel-project&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Install Required Dependencies&quot;,&quot;text&quot;:&quot;Install Required Dependencies&quot;,&quot;link&quot;:&quot;install-required-dependencies&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Configure webpack.mix.js File&quot;,&quot;text&quot;:&quot;Configure webpack.mix.js File&quot;,&quot;link&quot;:&quot;configure-webpackmixjs-file&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Create Your Vue.js (or Other Front-End Framework) Components&quot;,&quot;text&quot;:&quot;Create Your Vue.js (or Other Front-End Framework) Components&quot;,&quot;link&quot;:&quot;create-your-vuejs-or-other-front-end-framework-components&quot;},{&quot;level&quot;:1,&quot;content&quot;:&quot;Hello, Laravel!&quot;,&quot;text&quot;:&quot;Hello, Laravel!&quot;,&quot;link&quot;:&quot;hello-laravel&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Code Along: Web App Development&quot;,&quot;text&quot;:&quot;Code Along: Web App Development&quot;,&quot;link&quot;:&quot;code-along-web-app-development&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Free Training&quot;,&quot;text&quot;:&quot;Free Training&quot;,&quot;link&quot;:&quot;free-training&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Import and Use Your Components in the Main App.js File&quot;,&quot;text&quot;:&quot;Import and Use Your Components in the Main App.js File&quot;,&quot;link&quot;:&quot;import-and-use-your-components-in-the-main-appjs-file&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Create a Blade Template for Rendering Your Vue.js Components&quot;,&quot;text&quot;:&quot;Create a Blade Template for Rendering Your Vue.js Components&quot;,&quot;link&quot;:&quot;create-a-blade-template-for-rendering-your-vuejs-components&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Create a Route and Controller for Rendering the Blade Template&quot;,&quot;text&quot;:&quot;Create a Route and Controller for Rendering the Blade Template&quot;,&quot;link&quot;:&quot;create-a-route-and-controller-for-rendering-the-blade-template&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Run the Development Server&quot;,&quot;text&quot;:&quot;Run the Development Server&quot;,&quot;link&quot;:&quot;run-the-development-server&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Build for Production&quot;,&quot;text&quot;:&quot;Build for Production&quot;,&quot;link&quot;:&quot;build-for-production&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Conclusion: Creating Your Laravel User Interface&quot;,&quot;text&quot;:&quot;Conclusion: Creating Your Laravel User Interface&quot;,&quot;link&quot;:&quot;conclusion-creating-your-laravel-user-interface&quot;}]\" data-visible=\"[true,true,true,true,true,true]\" data-delete-headers=\"[{&quot;label&quot;:&quot;Building Your First Laravel User Interface (Step-by-Step Guide)&quot;,&quot;value&quot;:&quot;building-your-first-laravel-user-interface-step-by-step-guide&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Set Up a New Laravel Project&quot;,&quot;value&quot;:&quot;set-up-a-new-laravel-project&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Install Required Dependencies&quot;,&quot;value&quot;:&quot;install-required-dependencies&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Configure webpack.mix.js File&quot;,&quot;value&quot;:&quot;configure-webpackmixjs-file&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Create Your Vue.js (or Other Front-End Framework) Components&quot;,&quot;value&quot;:&quot;create-your-vuejs-or-other-front-end-framework-components&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Code Along: Web App Development&quot;,&quot;value&quot;:&quot;code-along-web-app-development&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Free Training&quot;,&quot;value&quot;:&quot;free-training&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Import and Use Your Components in the Main App.js File&quot;,&quot;value&quot;:&quot;import-and-use-your-components-in-the-main-appjs-file&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Create a Blade Template for Rendering Your Vue.js Components&quot;,&quot;value&quot;:&quot;create-a-blade-template-for-rendering-your-vuejs-components&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Create a Route and Controller for Rendering the Blade Template&quot;,&quot;value&quot;:&quot;create-a-route-and-controller-for-rendering-the-blade-template&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Run the Development Server&quot;,&quot;value&quot;:&quot;run-the-development-server&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Build for Production&quot;,&quot;value&quot;:&quot;build-for-production&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Conclusion: Creating Your Laravel User Interface&quot;,&quot;value&quot;:&quot;conclusion-creating-your-laravel-user-interface&quot;,&quot;isDelete&quot;:false}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#set-up-a-new-laravel-project\">Set Up a New Laravel Project<\/a><li><a href=\"#install-required-dependencies\">Install Required Dependencies<\/a><li><a href=\"#configure-webpackmixjs-file\">Configure webpack.mix.js File<\/a><li><a href=\"#create-your-vuejs-or-other-front-end-framework-components\">Create Your Vue.js (or Other Front-End Framework) Components<\/a><li><a href=\"#free-training\">Free Training<\/a><ul class=\"eb-toc__list\"><li><a href=\"#import-and-use-your-components-in-the-main-appjs-file\">Import and Use Your Components in the Main App.js File<\/a><li><a href=\"#create-a-blade-template-for-rendering-your-vuejs-components\">Create a Blade Template for Rendering Your Vue.js Components<\/a><li><a href=\"#create-a-route-and-controller-for-rendering-the-blade-template\">Create a Route and Controller for Rendering the Blade Template<\/a><li><a href=\"#run-the-development-server\">Run the Development Server<\/a><li><a href=\"#build-for-production\">Build for Production<\/a><\/li><\/ul><\/ul><\/div><\/div><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Set Up a New Laravel Project<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install Laravel if you haven&#8217;t already:&nbsp;<code>composer global require laravel\/installer<\/code><\/li>\n\n\n\n<li>Create a new Laravel project:&nbsp;<code>laravel new project-name<\/code><\/li>\n\n\n\n<li>Navigate to the project directory:&nbsp;<code>cd project-name<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Install Required Dependencies<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install Node.js and npm (Node Package Manager) if you haven&#8217;t already.<\/li>\n\n\n\n<li>Install the required JavaScript dependencies (e.g., Vue.js, React, or any other front-end framework\/library you prefer) by running the appropriate command in your terminal. For example, to install Vue.js:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm install --save-dev vue@next vue-loader@next\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E06C75\">npm<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">install<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">--<\/span><span style=\"color: #E06C75\">save<\/span><span style=\"color: #56B6C2\">-<\/span><span style=\"color: #E06C75\">dev<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">vue<\/span><span style=\"color: #ABB2BF\">@<\/span><span style=\"color: #E06C75\">next<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">vue<\/span><span style=\"color: #56B6C2\">-<\/span><span style=\"color: #E06C75\">loader<\/span><span style=\"color: #ABB2BF\">@<\/span><span style=\"color: #E06C75\">next<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Configure webpack.mix.js File<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the&nbsp;<code>webpack.mix.js<\/code>&nbsp;file located in the root directory of your Laravel project.<\/li>\n\n\n\n<li>Configure the file to include the necessary JavaScript dependencies and their entry points.<\/li>\n\n\n\n<li>For example, if you&#8217;re using Vue.js, your&nbsp;<code>webpack.mix.js<\/code>&nbsp;file might look like this:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const mix = require('laravel-mix');\n\nmix.js('resources\/js\/app.js', 'public\/js')\n   .vue();\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">mix<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">require<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;laravel-mix&#39;<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E5C07B\">mix<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">js<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;resources\/js\/app.js&#39;<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #98C379\">&#39;public\/js&#39;<\/span><span style=\"color: #ABB2BF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">   .<\/span><span style=\"color: #61AFEF\">vue<\/span><span style=\"color: #ABB2BF\">();<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Create Your Vue.js (or Other Front-End Framework) Components<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new directory called&nbsp;<code>components<\/code>&nbsp;inside the&nbsp;<code>resources\/js<\/code>&nbsp;directory.<\/li>\n\n\n\n<li>Create your Vue.js (or other front-end framework) components inside the&nbsp;<code>components<\/code>&nbsp;directory.<\/li>\n\n\n\n<li>For example, create a file called&nbsp;<code>Example.vue<\/code>&nbsp;inside&nbsp;<code>resources\/js\/components<\/code>&nbsp;with the following content:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;template&gt;\n  &lt;div&gt;\n    &lt;h1&gt;Hello, Laravel!&lt;\/h1&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  name: 'Example'\n}\n&lt;\/script&gt;\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">template<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  &lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">h1<\/span><span style=\"color: #ABB2BF\">&gt;Hello, Laravel!&lt;\/<\/span><span style=\"color: #E06C75\">h1<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  &lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">template<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">script<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">export default <\/span><span style=\"color: #C678DD\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #E06C75\">name<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #98C379\">&#39;Example&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">script<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><strong><mark>Side Note: There\u2019s an Easier Way To Build Your Interface<\/mark><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five is a rapid development environment, which allows you to build applications faster than ever. Five integrates all steps of application development: backend, frontend, and deployment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five automatically creates a responsive web interface, including forms, charts, dashboards, or&nbsp;<a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/generate-mysql-report\/\">PDF reports<\/a>&nbsp;on top of almost any data source \u2013 no front-end skills or framework knowledge required!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow our FREE code-along tutorial and learn how to rapidly build a full-stack web application.<\/p>\n\n\n\n<div class=\"wp-block-essential-blocks-row alignfull\"><div class=\"eb-parent-wrapper eb-parent-eb-row-ws61cvl \"><div class=\"eb-row-root-container eb-row-ws61cvl\" data-id=\"eb-row-ws61cvl\"><div class=\"eb-row-wrapper\"><div class=\"eb-row-inner\">\n<div class=\"eb-parent-wrapper eb-parent-eb-column-e18biyl  wp-block-essential-blocks-column\"><div class=\"eb-column-wrapper eb-column-e18biyl\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-e53gio0 \"><div class=\"eb-infobox-e53gio0 eb-infobox-wrapper\"><div class=\"infobox-wrapper-inner\"><div class=\"icon-img-wrapper\"><div class=\"eb-icon number-or-icon\"><span data-icon=\"fas fa-cloud-upload-alt\" class=\"eb-infobox-icon-data-selector  fas fa-cloud-upload-alt\"><\/span><\/div><\/div><div class=\"contents-wrapper\"><h2 class=\"title\">Code Along: Web App Development<\/h2><p class=\"description\">Follow our FREE step-by-step code-along tutorial.<br><br><\/p><div class=\"eb-infobox-btn-wrapper\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/code-along\/code-along-full-stack-web-app\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"infobox-btn  hvr-grow\">Build Your Web App<\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"eb-parent-wrapper eb-parent-eb-column-g92ozld  wp-block-essential-blocks-column\"><div class=\"eb-column-wrapper eb-column-g92ozld\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-rzqcs3y \"><div class=\"eb-infobox-rzqcs3y eb-infobox-wrapper\"><div class=\"infobox-wrapper-inner\"><div class=\"icon-img-wrapper\"><div class=\"eb-icon number-or-icon\"><span data-icon=\"far fa-calendar-minus\" class=\"eb-infobox-icon-data-selector  far fa-calendar-minus\"><\/span><\/div><\/div><div class=\"contents-wrapper\"><h2 class=\"title\">Free Training<\/h2><p class=\"description\">Sign Up for a FREE product training session<\/p><div class=\"eb-infobox-btn-wrapper\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/free-training\/\" target=\"_self\" rel=\"noopener noreferrer\" class=\"infobox-btn  hvr-grow\">Sign Up Now<\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Import and Use Your Components in the Main App.js File<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the&nbsp;<code>resources\/js\/app.js<\/code>&nbsp;file.<\/li>\n\n\n\n<li>Import your Vue.js (or other front-end framework) components.<\/li>\n\n\n\n<li>Mount your Vue.js instance and specify the target element for rendering.<\/li>\n\n\n\n<li>For example, with Vue.js:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import { createApp } from 'vue';\nimport Example from '.\/components\/Example.vue';\n\nconst app = createApp({});\napp.component('example-component', Example);\napp.mount('#app');\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C678DD\">import<\/span><span style=\"color: #ABB2BF\"> { <\/span><span style=\"color: #E06C75\">createApp<\/span><span style=\"color: #ABB2BF\"> } <\/span><span style=\"color: #C678DD\">from<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">&#39;vue&#39;<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">import<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">Example<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">from<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">&#39;.\/components\/Example.vue&#39;<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">app<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">createApp<\/span><span style=\"color: #ABB2BF\">({});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E5C07B\">app<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">component<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;example-component&#39;<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75\">Example<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E5C07B\">app<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">mount<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;#app&#39;<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Blade Template for Rendering Your Vue.js Components<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new blade template file inside the&nbsp;<code>resources\/views<\/code>&nbsp;directory, e.g.,&nbsp;<code>example.blade.php<\/code>.<\/li>\n\n\n\n<li>Add a&nbsp;<code>div<\/code>&nbsp;with an&nbsp;<code>id<\/code>&nbsp;where your Vue.js components will be rendered, and include the compiled JavaScript file.<\/li>\n\n\n\n<li>For example:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Laravel User Interface&lt;\/title&gt;\n    &lt;script src=&quot;{{ mix('\/js\/app.js') }}&quot; defer&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;app&quot;&gt;\n      &lt;example-component&gt;&lt;\/example-component&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ABB2BF\">&lt;!<\/span><span style=\"color: #E06C75\">DOCTYPE<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">html<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">html<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  &lt;<\/span><span style=\"color: #E06C75\">head<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">title<\/span><span style=\"color: #ABB2BF\">&gt;Laravel User Interface&lt;\/<\/span><span style=\"color: #E06C75\">title<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">script<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">src<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;{{ mix(&#39;\/js\/app.js&#39;) }}&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">defer<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">script<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  &lt;\/<\/span><span style=\"color: #E06C75\">head<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  &lt;<\/span><span style=\"color: #E06C75\">body<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">id<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;app&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">      &lt;<\/span><span style=\"color: #E06C75\">example-component<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">example-component<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  &lt;\/<\/span><span style=\"color: #E06C75\">body<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">html<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Route and Controller for Rendering the Blade Template<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new route in the&nbsp;<code>routes\/web.php<\/code>&nbsp;file:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"Route::get('\/', 'ExampleController@index');\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E5C07B\">Route<\/span><span style=\"color: #ABB2BF\">::<\/span><span style=\"color: #61AFEF\">get<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;\/&#39;<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #98C379\">&#39;ExampleController@index&#39;<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new controller called&nbsp;<code>ExampleController<\/code>&nbsp;by running the following Artisan command:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"php artisan make:controller ExampleController\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ABB2BF\">php artisan make:controller ExampleController<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the&nbsp;<code>app\/Http\/Controllers\/ExampleController.php<\/code>&nbsp;file and define the&nbsp;<code>index<\/code>&nbsp;method to return the blade template:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;?php\n\nnamespace App\\Http\\Controllers;\n\nclass ExampleController extends Controller\n{\n  public function index()\n  {\n    return view('example');\n  }\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #56B6C2\">&lt;<\/span><span style=\"color: #C678DD\">?<\/span><span style=\"color: #ABB2BF\">php<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">namespace<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">App\\Http\\Controllers<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">class<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">ExampleController<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">extends<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">Controller<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #C678DD\">public<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">function<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">index<\/span><span style=\"color: #ABB2BF\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">return<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">view<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;example&#39;<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Run the Development Server<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Run the Laravel development server with the following command:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"php artisan serve\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ABB2BF\">php artisan serve<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open your web browser and navigate to&nbsp;<code>http:\/\/localhost:8000<\/code>&nbsp;to see your Laravel user interface.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Build for Production<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When you&#8217;re ready to deploy your Laravel interface to a production server, run the following command to compile your assets:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm run production\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ABB2BF\">npm run production<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This will create a&nbsp;<code>public\/js\/app.js<\/code>&nbsp;file with your optimized and minified JavaScript code.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When you run the Laravel development server, navigate to <code>http:\/\/localhost:8000<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion: Creating Your Laravel User Interface<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Keep in mind that this is a basic setup, and you may need to adjust the configuration and add more functionality based on your specific requirements. Additionally, you can incorporate other front-end libraries or frameworks, such as React or Angular, by following a similar approach and adjusting the configuration accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building Your First Laravel User Interface (Step-by-Step Guide) Building a modern web application often requires integrating a front-end user interface with a back-end framework. Laravel, a popular PHP web application framework, provides a solid foundation for building robust and scalable applications. However, to create an engaging and interactive user experience, you&#8217;ll need to combine Laravel [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":2639,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21],"tags":[],"class_list":["post-2638","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Build-Your-Laravel-User-Interface-Today.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Build-Your-Laravel-User-Interface-Today-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Build-Your-Laravel-User-Interface-Today-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Build-Your-Laravel-User-Interface-Today-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Build-Your-Laravel-User-Interface-Today-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Build-Your-Laravel-User-Interface-Today.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Build-Your-Laravel-User-Interface-Today.png",1280,720,false]},"uagb_author_info":{"display_name":"Ryan Forrester","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed9_au\/"},"uagb_comment_info":0,"uagb_excerpt":"Building Your First Laravel User Interface (Step-by-Step Guide) Building a modern web application often requires integrating a front-end user interface with a back-end framework. Laravel, a popular PHP web application framework, provides a solid foundation for building robust and scalable applications. However, to create an engaging and interactive user experience, you&#8217;ll need to combine Laravel&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=2638"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2638\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/2639"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=2638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=2638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=2638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}