{"id":2134,"date":"2022-04-29T16:09:12","date_gmt":"2022-04-29T09:09:12","guid":{"rendered":"https:\/\/wptips.dev\/?p=2134"},"modified":"2022-11-19T13:10:18","modified_gmt":"2022-11-19T06:10:18","slug":"wp-login-with-vue","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/wp-login-with-vue\/","title":{"rendered":"WordPress Login with Vue JS (Authentication API)"},"content":{"rendered":"\n

Update Nov 2022<\/strong>: This tutorial uses Vue 2. If you prefer Vue 3, check out my WP Vue Boilerplate<\/a> that comes with Registration and ForgotPassword. <\/p>\n\n\n\n

Headless WordPress<\/strong> is more powerful than most people thought. The API is easy to customize and most people are already familiar with the admin UI.<\/p>\n\n\n\n

One thing I had trouble with is integrating Login authentication with Vue. So I will share what I have learned here:<\/p>\n\n\n\n

TABLE OF CONTENT<\/strong><\/p>\n\n\n\n

  1. Vue Installation<\/a><\/li>
  2. WP Installation<\/a><\/li>
  3. Project Setup<\/a><\/li>
  4. Router<\/a><\/li>
  5. Login UI<\/a><\/li>
  6. Store<\/a><\/li>
  7. Environment Variable<\/a><\/li>
  8. Finishing<\/a><\/li>
  9. Try it Out<\/a><\/li><\/ol>\n\n\n\n

    TLDR<\/strong>: Read the finished code<\/a> from my Github.<\/p>\n\n\n\n

    1. Vue Installation<\/h2>\n\n\n\n

    Let’s start by generating the boilerplate files. If you don’t have Vue CLI installed, run this:<\/p>\n\n\n\n

    npm install -g @vue\/cli<\/code><\/pre>\n\n\n\n
    Then run this command to create a new project in “\/my-app” folder.<\/p>\n\n\n\n
    vue create my-app<\/code><\/pre>\n\n\n\n
    This tutorial uses Vue 2<\/strong>. But feel free to use Vue 3 if you know which part to change:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    After the boilerplate is generated, modify package.json<\/code> to add axios, vue-router, vuex, node-sass, and sass-loader:<\/p>\n\n\n\n
    {\n  \"name\": \"my-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  },\n  \"dependencies\": {\n    \"axios\": \"^0.21.1\",\n    \"core-js\": \"^3.6.5\",\n    \"vue\": \"^2.6.11\",\n    \"vue-router\": \"^3.5.2\",\n    \"vuex\": \"^3.4.0\"\n  },\n  \"devDependencies\": {\n    \"@vue\/cli-plugin-babel\": \"~4.5.13\",\n    \"@vue\/cli-plugin-eslint\": \"~4.5.13\",\n    \"@vue\/cli-service\": \"~4.5.13\",\n    \"babel-eslint\": \"^10.1.0\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-plugin-vue\": \"^6.2.2\",\n    \"vue-template-compiler\": \"^2.6.11\",\n    \"node-sass\": \"^4.12.0\",\n    \"sass-loader\": \"^8.0.2\"\n  },\n  \"babel\": {\n    \"presets\": [\n      \"@vue\/cli-plugin-babel\/preset\"\n    ]\n  },\n  \"eslintConfig\": {\n    \"root\": true,\n    \"env\": {\n      \"node\": true\n    },\n    \"extends\": [\n      \"plugin:vue\/essential\",\n      \"eslint:recommended\"\n    ],\n    \"parserOptions\": {\n      \"parser\": \"babel-eslint\"\n    },\n    \"rules\": {}\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\",\n    \"not dead\"\n  ]\n}\n<\/code><\/pre>\n\n\n\n
    Finally, run this command to install all packages:<\/p>\n\n\n\n
    npm install<\/code><\/pre>\n\n\n\n
    2. WP Installation<\/h2>\n\n\n\n
    I assume you have an existing WordPress installation, either a local or live one. If you don’t, create localhost with LOCAL<\/a>.<\/p>\n\n\n\n
    Install this plugin<\/strong> in your WordPress: JWT Authentication<\/a>.<\/p>\n\n\n\n
    Then add this to your wp-config:<\/p>\n\n\n\n
    define('JWT_AUTH_CORS_ENABLE', true);\ndefine('JWT_AUTH_SECRET_KEY', 'insert-random-hash');<\/code><\/pre>\n\n\n\n
    You can get the random hash by picking any from https:\/\/api.wordpress.org\/secret-key\/1.1\/salt\/<\/a><\/p>\n\n\n\n
    3. Project Setup<\/h2>\n\n\n\n
    We will create these 7 new files:<\/p>\n\n\n\n