Add simple Nuxt.js example with form

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -1,13 +1,11 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
 # Logs
-logs
+/logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
 pids
@@ -20,12 +18,11 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
-*.lcov
 
 # nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (https:https://gruntjs.com/creating-plugins#storing-task-files)
+# Grunt intermediate storage (http:https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
 # Bower dependency directory (https://bower.io/)
@@ -44,21 +41,12 @@ jspm_packages/
 # TypeScript v1 declaration files
 typings/
 
-# TypeScript cache
-*.tsbuildinfo
-
 # Optional npm cache directory
 .npm
 
 # Optional eslint cache
 .eslintcache
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
 # Optional REPL history
 .node_repl_history
 
@@ -70,35 +58,33 @@ typings/
 
 # dotenv environment variables file
 .env
-.env.test
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 
-# Next.js build output
+# next.js build output
 .next
 
-# Nuxt.js build / generate output
+# nuxt.js build output
 .nuxt
-dist
 
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
+# Nuxt generate
+dist
 
 # vuepress build output
 .vuepress/dist
 
 # Serverless directories
-.serverless/
+.serverless
+
+# IDE / Editor
+.idea
 
-# FuseBox cache
-.fusebox/
+# Service worker
+sw.*
 
-# DynamoDB Local files
-.dynamodb/
+# macOS
+.DS_Store
 
-# TernJS port file
-.tern-port
+# Vim swap files
+*.swp

README.md

@@ -1,2 +1,22 @@
 # formspree-example-nuxt
+
 An example of using Formspree with Nuxt.js
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

components/ContactForm.vue

@@ -0,0 +1,47 @@
+<template>
+ <form
+ action="https://formspree.io/p/1615048538327089110/f/contact"
+ method="POST"
+ >
+ <label>
+ Your email:
+ <input type="email" name="email" />
+ </label>
+
+ <label>
+ Your message:
+ <textarea name="message"></textarea>
+ </label>
+
+ <button type="submit">Send</button>
+ </form>
+</template>
+
+<style>
+/* Some nice boilerplate CSS to tidy up your form */
+form {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ grid-gap: 1rem;
+ text-align: left;
+ padding: 2rem 0;
+}
+form label {
+ display: contents;
+}
+form input[type="email"],
+form textarea,
+form button {
+ font-family: inherit;
+ font-size: inherit;
+ border: 1px solid currentColor;
+ background: none;
+ padding: 0.4rem 0.5rem;
+}
+form textarea {
+ resize: vertical;
+}
+form button {
+ justify-self: start;
+}
+</style>

components/Logo.vue

@@ -0,0 +1,29 @@
+<template>
+ <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http:https://www.w3.org/2000/svg">
+ <path
+ d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+ fill="#00C58E"
+ />
+ <path
+ d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+ fill="#108775"
+ />
+ <path
+ d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+ fill="#2F495E"
+ />
+ </svg>
+</template>
+
+<style>
+.NuxtLogo {
+ animation: 1s appear;
+ margin: auto;
+}
+
+@keyframes appear {
+ 0% {
+ opacity: 0;
+ }
+}
+</style>

components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

layouts/default.vue

@@ -0,0 +1,62 @@
+<template>
+ <div>
+ <Nuxt />
+ </div>
+</template>
+
+<style>
+html {
+ font-family:
+ 'Source Sans Pro',
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ Roboto,
+ 'Helvetica Neue',
+ Arial,
+ sans-serif;
+ font-size: 16px;
+ word-spacing: 1px;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+}
+
+.button--green {
+ display: inline-block;
+ border-radius: 4px;
+ border: 1px solid #3b8070;
+ color: #3b8070;
+ text-decoration: none;
+ padding: 10px 30px;
+}
+
+.button--green:hover {
+ color: #fff;
+ background-color: #3b8070;
+}
+
+.button--grey {
+ display: inline-block;
+ border-radius: 4px;
+ border: 1px solid #35495e;
+ color: #35495e;
+ text-decoration: none;
+ padding: 10px 30px;
+ margin-left: 15px;
+}
+
+.button--grey:hover {
+ color: #fff;
+ background-color: #35495e;
+}
+</style>

middleware/README.md

@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

nuxt.config.js

@@ -0,0 +1,36 @@
+export default {
+ // Target: https://go.nuxtjs.dev/config-target
+ target: "static",
+
+ // Global page headers: https://go.nuxtjs.dev/config-head
+ head: {
+ title: "My Nuxt.js Site",
+ htmlAttrs: {
+ lang: "en"
+ },
+ meta: [
+ { charset: "utf-8" },
+ { name: "viewport", content: "width=device-width, initial-scale=1" },
+ { hid: "description", name: "description", content: "" }
+ ],
+ link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
+ },
+
+ // Global CSS: https://go.nuxtjs.dev/config-css
+ css: [],
+
+ // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+ plugins: [],
+
+ // Auto import components: https://go.nuxtjs.dev/config-components
+ components: true,
+
+ // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+ buildModules: [],
+
+ // Modules: https://go.nuxtjs.dev/config-modules
+ modules: [],
+
+ // Build Configuration: https://go.nuxtjs.dev/config-build
+ build: {}
+};