A Nuxt.js static website with animations, transitions and a serverless Contact Form

• Nuxt.js Static Site Generation for easy hosting.
• Netlify's lambda for Contact Form.
• SendGrid mailing for Contact Form.
• Netlify compilation on each commit, with automatic deployment to their CDN (once you finish all the steps).

Check out this guide for a more thorough reading on Nuxt and Netlify, or jump straight ahead for more concise instructions.

• Github account
• Netlify account
• Vue/Nuxt understanding

Using your Github account, go ahead and fork the repo or just clone it.

• Go to Sign Up and create an account.
• Then, go to the 'API Keys' page inside of 'Settings', and click 'Create API Key'.
• Give your API key a name.
• Select 'Restricted Access' and then choose the 'Mail Send' permission.
• Click 'Create and View'.
• Copy your API Key to .envexample and rename te file to .env.
  • This will let you do local testing.
  • Change the email that will receive the Contact Form info on MAIL_TO.
• Go to the Netlify's project 'Setting' page.
• Choose 'Build & deploy > Environment' and copy the API Key there as well.
  • This will let you work on production.

Install all the dependencies

npm i

Now, you can run the code in development with:

npm run dev

This will serve your page in localhost:3000 with hot reload. It will also run a netlify-lambda server with the function for local testing. It works through @nuxt/proxy that is configured on nuxt.config.js.

Once you're ready to generate your static assets for production:

npm run generate

This will create a /dist folder with the assets. This folder is not committed.
This is what Netlify will be building on their server, and then uploading the results to their CDN.

• Besides what was mentioned, it's just a regular Vue + Nuxt app.
• The code is commented to try to assist anyone in modifying the views.
• Configure Nuxt in: nuxt.config.js.
• Check the Vue.js and Nuxt.js documentation.

If you run npm run dev and you like what you see, you're ready to deploy to Netlify!

• Go to Netlify
• Choose Github and authorize Netlify, if you haven't already
• Choose this repo
• Leave the settings as they are and click on Deploy Site

Now, with every commit you do, Netlify will compile your site with npm run generate and deploy it on their CDN.

If you have any problems implementing this, please don't hesitate and create a Github Issue or send me a tweet.

• Vue.js
• Vuelidate
• Nuxt.js
• Netlify functions
• SendGrid's Mailer
• Bulma
• SASS
• Hooper's Slider
• Vue-Particles
• ❤️

• Netlify