Vue Setup: Design, Plugins and Deploy

Design

The display I use is the same as before, when using the Laravel Blade. Grab the code, convert it, adjust the environment from Vuejs. There are not many changes, only a little in the .css section and a little reformatter in the .js section, the rest is the same. I removed some plugins because Vue can handle them. There isn’t much to share in this section.

Vue Plugins

Apart from the built-in plugins from Vue, I added a few, like vue-clamp, vue-content-loader, vue-disqus, vue-infinite-loading, vue-markdown-render, vue-meta. You can copy and paste the plugin in the search engine to find out what it is used for and how to use it, it’s all very easy!

Deploy

As I mentioned here, I deployed the frontend using Netlify. There isn’t much to setup, we just need to hook up our Git project with Netlify, after that it will be handled by Netlify. For example, they will build a preview when there is a pull request and also a push event to the branch, everything can be set.

I used a bit of config using netlify.toml. It doesn’t contain much just to show the root directory for publish, headers cors, and also redirect all to index.html because this is a static Single Page Application (SPA) website.

codeCopy
[build]
publish = ""dist""

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = ""/ *""
    [headers.values]
    Access-Control-Allow-Origin = ""*""

[[redirects]]
from = ""/ *""
to = ""/index.html""
status = 200

That’s it!