This is a simple boilerplate for folks looking to build a VueJS site and host it on Netlify. This is basically just a VueCLI build with some subtle config to make getting started easier.
I've added:
-
PrerenderSpaPlugin for production builds. This helps with SEO and Accessibility by allowing the site to work without JavaScript and giving crawlers a bit more access to the code without having to compile JS.
-
A structure to add views and components with scoped CSS files.
-
A simple Stylus setup with some variables, base styles etc.
-
A
netlify.tomlfile that adds some useful security headers and a redirect rule to help with serving Single Page Apps. -
General meta and meta tags for Twitter & Facebook.
-
A Javascript file in
/public/outside-vue.jsthat will run any logic you want to live outside the VueJS framework. I don't recommend using this unles you have a very specific use case. In kravse.dev I used it to load Three.js after Vue had rendered the page. -
Favicons and a properly sized shareing image for link previews.
-
robots.txt,sitemap_index.xml, andsitemap_main.xmlplease be sure to modify these to include your site information.
npm install
npm run serve
npm run build
npm run lint
- Replace
YOURSITE.comwith your website address in:
/public/robots.txt/public/sitemap_index.xml/public/sitemap_main.xml/public/index.html
-
Replace
/public/favicon.icoand/public/favicon.pngwith custom favicons. -
Replace
/public/share-img.pngwith a 1200x630 image of your choice. This image will populate link previews on Facebook, Twitter, Slack, etc. -
Be sure to update the prerendered routes in
./vue.config.js. Whatever routes you add here will be pre-rendered for production.
I recommend hosting & deploying for free with Netlify.