<commit_before># Nuxt

[Vue](vue.md) is a good place to start, but Nuxt is even better.

Nuxt provides informed default options as a foundation for your project. Here are a few more reasons to use Nuxt:

https://zendev.com/2018/09/17/frontend-architecture-lessons-from-nuxt-js.html


## New Projects

Create a fresh project according to:

https://nuxtjs.org/guide/installation

Make sure you have npx installed (npx is shipped by default since NPM 5.2.0)

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

Or with yarn:

```
$ yarn create nuxt-app <my-project>
```

And answer questions accordingly.

When you set up a nuxt project, you will be able to include a number of different tools. This is an easy time to configure those. 

### Nuxt.js modules

Be sure to say "Yes!" to Nuxt.js modules: 

Axios
PWA Support
DotEnv

More info on these options:
 
 - [PWA (Progressive Web applications)](https://developers.google.com/web/progressive-web-apps/)
 - [DotEnv](https://github.com/motdotla/dotenv#readme)
   [Store config in the environment](https://12factor.net/config)


### Linting

I like linting too:

❯◉ ESLint
 ◉ Prettier
 ◉ Lint staged files
 ◉ StyleLint

### Testing

No preference yet on testing framework, other than choose and use one. 

  Jest 
  AVA 

### Deployment

You will need to consider how it will be deployed. 

Server Rendering (Universal SSR)
Universal == Server Side Rendering

SPA (Single Page Application)
SPA == Single Page Application

(Do *not* confuse SPA with PWA - they are different things)

https://nuxtjs.org/guide#server-rendered-universal-ssr-


## Running

```
npm run dev
```

## Templates

The general syntax for templates is handled by Vue:

https://vuejs.org/v2/guide/syntax.html

Common patterns:

List rendering
https://vuejs.org/v2/guide/list.html#key

### Page Titles

  head() {
    return {
      title: this.$route.name 
    }
  },

https://stackoverflow.com/questions/48285476/using-nuxt-how-do-i-put-the-route-name-in-the-page-title#48286279

### Scripts

The script block is where you put logic related to your component. 

data is made up of properties
computed is made up of getters.

via:<commit_msg>initial notes about static building<commit_after># Nuxt

[Vue](vue.md) is a good place to start, but Nuxt is even better.

Nuxt provides informed default options as a foundation for your project. Here are a few more reasons to use Nuxt:

https://zendev.com/2018/09/17/frontend-architecture-lessons-from-nuxt-js.html


## New Projects

Create a fresh project according to:

https://nuxtjs.org/guide/installation

Make sure you have npx installed (npx is shipped by default since NPM 5.2.0)

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

Or with yarn:

```
$ yarn create nuxt-app <my-project>
```

And answer questions accordingly.

When you set up a nuxt project, you will be able to include a number of different tools. This is an easy time to configure those. 

### Nuxt.js modules

Be sure to say "Yes!" to Nuxt.js modules: 

Axios
PWA Support
DotEnv

More info on these options:
 
 - [PWA (Progressive Web applications)](https://developers.google.com/web/progressive-web-apps/)
 
 - [DotEnv](https://github.com/motdotla/dotenv#readme)
   [Store config in the environment](https://12factor.net/config)


### Linting

I like linting too:

❯◉ ESLint
 ◉ Prettier
 ◉ Lint staged files
 ◉ StyleLint

### Testing

No preference yet on testing framework, other than choose and use one. 

  Jest 
  AVA 

### Deployment

You will need to consider how it will be deployed. 

Server Rendering (Universal SSR)
Universal == Server Side Rendering

SPA (Single Page Application)
SPA == Single Page Application

(Do *not* confuse SPA with PWA - they are different things)

https://nuxtjs.org/guide#server-rendered-universal-ssr-

https://developer.okta.com/blog/2019/04/26/tutorial-build-universal-apps-with-nuxt

### Static Builds

Both deployment options can be built for a static hosting situation. SPA will be one big .js file. Universal will have many. 

    npx nuxt generate

https://nuxtjs.org/api/configuration-generate/

https://medium.com/a-man-with-no-server/static-site-generators-nuxt-js-2fa9782d27c8


## Running

```
npm run dev
```


## Templates

The general syntax for templates is handled by Vue:

https://vuejs.org/v2/guide/syntax.html

Common patterns:

List rendering
https://vuejs.org/v2/guide/list.html#key

### Page Titles

  head() {
    return {
      title: this.$route.name 
    }
  },

https://stackoverflow.com/questions/48285476/using-nuxt-how-do-i-put-the-route-name-in-the-page-title#48286279

### Scripts

The script block is where you put logic related to your component. 

data is made up of properties
computed is made up of getters.

via:
{'fraction_non_alphanumeric': 0.10531892350074168, 'fraction_numerical': 0.01652892561983471, 'mean_word_length': 3.6965174129353233, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 21, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2095762', 'n_tokens_mistral': 1681, 'n_tokens_neox': 1530, 'n_words': 529}