How To Develop a website using vue.js with Drupal8

  0 comments Share with:

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

vue

 

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

npm-vue-project-created-successfully

 

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

npm-home-vue

 

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