Categories
Laravel Vue Js

Laravel 8.x configure Vue JS CRUD with Vue Router, Vuex, Vue-Axios

In this post I am going to showing example how to configure Vue JS CRUD with Laravel 8.x. We will create a Single Page Application(SPA) using the Laravel 8.x and Vue JS. In this post you will learn how to use vue router and v-form with vue-axios package how to work with laravel and vue js crud. I am showing example on Windows 10 with XAMPP server. More details on my previous post Install Laravel on xampp server.

First Install Composer on your computer, click here to download and install composer. Also please install git bash, click here to download and install git bash. Now we use git bash to run command.

Download the NodeJs pre-built installer for Windows, click here to download and install NodeJs on your computer.

Install Laravel 8.x in xampp directory “laravelvue”:

Go to your E:\xampp\htdocs directory, right click open git bash terminal and run command composer create-project laravel/laravel laravelvue to install Laravel.

Got to “laravelvue” directory or your project directory by command cd laravelvue.

Install Laravel UI & Auth:

Now Install Laravel UI package by command composer require laravel/ui, Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command php artisan ui vue –auth

Now create controller with Invokable by Artisan command make:controller, That command is fired into the app/http/controllers directory, go to controllers directory and you can find a new PHP file PagesController.php

Go directory app/http/controllers and open file PagesController.php and welcome view in __invoke method.

Now we have to create resources/views/welcome.blade.php vie blade file look like following code.

Now add following route in routes/web.php

So now it’s Vue time:

Now Install NPM by command npm install && npm run dev

Now Install VUE by command npm install vue

Now install all required VUE tools and libraries by a single command:

OR

Now Install vue-router by command npm install vue-router, or for details click here

Now Install vuex by command npm install vuex –save, or for details click here

Now Install axios and v-form for client side validation by command npm install –save axios vue-axios vform, or for details click here

Now make ready resources app js in directory resources/js/app.js

Now make routes libraries js in directory resources/js/routes.js, with related component.

Now run following command to compiled js and css resource.

Now create component files in directory resources/js/components/*.vue files, with related component.

  • AppComponent.vue
  • HeaderComponent.vue
  • FooterComponent.vue
  • LoginComponent.vue
  • RegisterComponent.vue

resources/js/components/AppComponent.vue

resources/js/components/HeaderComponent.vue

resources/js/components/FooterComponent.vue

resources/js/components/LoginComponent.vue

resources/js/components/RegisterComponent.vue

Now every thing setup is done. Now you are ready to check it.

configure-vue-js-view

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Categories
WordPress

WordPress – create different template for different post type

In this post we will learn how to create different post template for different post type on TwentyTwentyOne theme. Now we want to create a child theme TwentyTwentyOne-Child as like my previous post How to Create a Child Theme?

Another important thinks, we want to know how to create WordPress custom post type, Please visit my previous post. How to Create WordPress Custom Post Types?

I have created custom post type faqs and create new a post to tested different post template for different post type is working or not.

custom-post-type-posts

Now please go to your child theme directory and crete new single file with custom post type. Example: single-{POST-TYPE}.php wp-content\themes\twentytwentyone-child\single-faqs.php file because my custom post type is “faqs”.

Now copy all code form original single.php file. wp-content\themes\twentytwentyone\single.php Open single.php via editor and copy all code and past on wp-content\themes\twentytwentyone-child\single-faqs.php

Now copy all code form original content-single.php file wp-content\themes\twentytwentyone\template-parts\content\content-single.php Open content-single.php via editor and copy all code and past on wp-content\themes\twentytwentyone-child\template-parts\content\content-faqs.php

Now call new template parts content like this, just change “content-single” to “content-faqs” on single-faqs.php file get_template_part(‘template-parts/content/content-faqs’);

I added some text on new template for texting FAQs custom template

New custom post type template is working.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 system config field dependent on previous field

In this post we will learn how to create a dependent field in Magento 2 admin system configuration field by XML.

So, now please open etc\adminhtml\system.xml file where this file is located in a custom module and define your configuration dropdown with a custom source model is the our first field.

Above xml code in which, on select field (custom_option_field) option with value “2” from a drop-down list a text field (dependant_field) will appear.

And if you want to create a field dependent on two or more values, use the follow code.

In above code if you select options with values “1” or “2” from (custom_option_field) dropdown list then the text field (dependant_field) will be appeared in the admin configuration.

After then, we need to create that source model for CustomOption:

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 adding breadcrumb via layout XML or Controller

How we can add breadcrumb in page layout or controller? In this post I have added two different example how to added custom breadcrumb via XML or PHP Controller.

Added breadcrumb by layout XML file:

Add new Block on body tag like referenceBlock name=”breadcrumbs”

Added breadcrumb by PHP Controller:

Open your page controller and find public function execute() method and add $breadcrumbs->addCrumb what you want.

After added any one method for breadcrumbs just run following command via cli and check breadcrumbs is working fine.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 admin error: Product does not exists

After migrating Magento to version I am facing below issues while navigating to Product page.

Error: Class Magento\Catalog\Model\Product\Attribute\Backend\LayoutUpdate does not exist

Also I am going to editing product in admin panel getting the below error

Error: Product does not exists

Product does not exists

In Magento 2 some version Magento created the LayoutUpdate file with the attributes custom_layout_update_file, When we revert back version, the attribute calling the file and cause the issue.

Solution:

Go to your Database and search in table eav_attribute table like below sql. If you will find two records and just remove them.

Find or Select query:

Delete query:

After delete two records from database run following command via cli

If you have redis, you will need to flush the cache from it.

redis-cli flushdb – Delete all the keys of the currently selected DB.
redis-cli flushall – Delete all the keys of all the existing databases, not just the currently selected one.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.