Sandbox-Nuxt

A sandbox for NuxtJS

Build Setup

# 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.

Developer's Note

Create new app with Nuxt

$ npx create-nuxt-app <project-name>

then run locally using:

$ npm run dev

Customize Buefy

Add customizing scss from https://buefy.org/documentation/customization/

Create a /assets/scss/main.scss
Copy the example from buefy.org
Modify for ex. $primary: #8c67ef; to another value
Reference in nuxt.config.{ts/js} like this:

css: ['@/assets/scss/main.scss']

If you need to include other css files, do:

css: ["@/assets/scss/main.scss", "~/assets/css/main.css"],

Restart Nuxt. You may see the following error:

ERROR  Failed to compile with 1 errors

This dependency was not found:

* ..\assets\scss\main.scss in ./.nuxt/App.js                    friendly-errors 04:47:26

To install it, you can run: npm install --save ..\assets\scss\main.scss

↑ running the above command won't help. So, try running following commands:

npm install sass-loader --save-dev
npm install --save-dev node-sass

Voila! Now running npm run dev will reflect style changes.

prettier `␍` issue

If you face the following error:

  12:34  error  Delete `␍`  prettier/prettier

consider adding the following to .prettierrc:

  "endOfLine": "auto"

If face this issue on git commit, make sure .prettierrc is added to the version control.

Setting up GitHub Pages deployment

Using custom domain

Use push-dir package following instructions for command line deployment

Install via npm

npm install push-dir --save-dev

Add following commands to package.json:

"scripts": {
  ...
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
}

Then generate and deploy your static application:

npm run generate
npm run deploy

See commit: 4e00343.

TIP: make sure your project is setup to render from gh-pages branch.

Fix lost CNAME

Apparently push dir pushes a clean slate commit to gh-pages branch, so every time you need to add CNAME file as well. To do this easilly, just add a staitc/CNAME file and thus gh-pages root will have CNAME included. efb4e38

nafSadh/sandbox-nuxt