Skip to content

nafSadh/sandbox-nuxt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f94e6c2 · Jun 1, 2020

History

10 Commits
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
May 30, 2020
May 30, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020
Jun 1, 2020

Repository files navigation

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/

  1. Create a /assets/scss/main.scss
  2. Copy the example from buefy.org
  3. Modify for ex. $primary: #8c67ef; to another value
  4. 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

About

A sandbox for playing with Vue NuxtJS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published