How To Develop a website using vue.js with Drupal8


Firstly you will need to install the Vue CLI to run this command.

npm install -g @vue/cli (it install latest version Vue.js)

NPM Vue CLI Install

The -g flag tells npm to install the CLI globally and when CLI has been installed successfully then you can use vue command on your terminal. 

You can check the vue command on your system



NPM Vue Installation Check


Now create a Vue app to run this command.

vue create project-name

when you run this command then it asks you a couple of question to know which features you want to install in your project.

Note: If the up and down arrow is not working then use this command.

winpty vue.cmd create project-name

Here is the attached screenshot for the questions he asked and i was selected these options.

NPM Vue create project step 1


NPM Vue create project step 2


NPM Vue create project step 3_4


NPM Vue Create Project Step 5


NPM Vue Create Project Step 6


NPM Vue Create Project Installation Progress


Here are the final screenshot for each steps



Now go the your project directory and run this command

npm run serve

then you can your project building has been started and after building it gives you a URL and when you visit this page then you can see a demo Vue.js project has been installed successfully.

NPM Vue Demo Site

Now i am going to install some libraries for our projects that help to extends Vue.js features.

vue add vuetify

Now you can do the changes in view and component files according to your requirements.

Here i have added some new menu router and it's view.

Menu Router


and in this view files i called it's components



Here is the example of one components.

Article Listing

Here i have integrated a Drupal API for Articles listing and pass this data in template.

Ozparty Vue



Add new comment