Headless drupal 8 with vue js

Hello Drupalers,

Today i am going to show you how can create headless website with  Drupal 8 and vue.



We will step by step to create headless website.

Step 1 : -  Install a fresh Drupal 8.  In my case i  installed drupal with composer .

 composer create-project drupal-composer/drupal-project:8.x-dev decoupled_drupal --stability dev --no-interaction  

Step 2 : - In this case we will use rest api to get  drupal content data in our vue app using "REST Module."


Step 3 :-  Create custom content type as  i have created content type "Album" and added some fields











Step 4 :- create view for rest export data.

 make sure your api path (i.e api/edm-album)


Note : Now Drupal is ready for headless use now we will create vue frontent to get this api data and will dispaly on frontent.



Step 5  :- Inside of your Drupal folder install Vue-cli wo we can use

 lenovo@lenovo-ThinkPad-L450:/var/www/html/decoupled_drupal/drupalvue $ sudo npm install -g vue-cli  

Step 6 :-  Setup Vue instance for headless use

 vue init webpack <name_of_project folder>  
 # install dependencies and go!  
 cd <name_of_project folder>  
 //install node dependencies from package json  
 npm install  
 // run this command to start your project  
 npm run dev  

Last command is used for serve react application and after that you will be able to see some url like

http://localhost:8080/


make sure you are running above commands from your drupalvue directory.