Nuxt integration into PlatformOS

• 📘 Nuxt Documentation: https://nuxtjs.org

• Adds <pos> block to .vue files allowing PlatformOS frontmatter and liquid markup

• Uses Nuxt generate to automatically compile, format and move generated output into PlatformOS

1. Create a PlatformOS instance at https://partners.platform-os.com/

2. Setup your PlatformOS instance ready to deploy https://documentation.platform-os.com/get-started

3. Install nuxt using create-nuxt-app Exactly as below. Run from inside your project folder to install nuxt alongside marketplace_builder

   $ npx create-nuxt-app nuxt
   

   During nuxt installation:

   1. Choose between integrated server-side frameworks. You must choose none:
   • None (Nuxt default server)
   2. Choose your favorite UI framework. You are free to choose:
   • None (feel free to add one later)
   • Bootstrap
   • Vuetify
   • Bulma
   • Tailwind
   • Element UI
   • Ant Design Vue
   • Buefy
   3. Choose your favorite testing framework. Not tested best choice is currently none:
   • None (feel free to add one later)
   • Jest
   • AVA
   4. The Nuxt mode you want (Universal) You must choose Universal.
   5. Add axios module to make HTTP request easily into your application. You must choose yes to Axios.
   6. Add EsLint to Lint your code on save. You are free to choose.
   7. Add Prettier to prettify your code on save. You are free to choose.
   8. Choose a package manager: Yarn not tested best choice is currently npm

4. Download the nuxt-platformOS zip and copy the files into your project. Choose to replace files if asked.

5. Update package.json adding the config and scripts below.

   {
   "config": {
       "nuxt": {
           "port": "8000"
       }
   },
   "scripts": {
       "staging": "cross-env POS_ENV=staging nuxt generate",
       "production": "cross-env POS_ENV=production nuxt generate"
       }
   }
   

6. CD into your nuxt folder > cd nuxt

7. Install dependencies using CLI

   1. cheerio > npm i cheerio --save-dev
   2. webpack-merge > npm i webpack-merge --save-dev
   3. nuxt-vuex-router-sync > npm i nuxt-vuex-router-sync
   4. dotenv > npm i dotenv

8. Update enviroment variable

   Locate the .env file in the yourProject/nuxt update the enviroment variable to your own and change any default settings. Currently the only way to get the CDN url is to use this liquid {{ '' | asset_url }} on a page then inspect the element and copy the full url ending with .../assets.

# serve with hot reload at localhost:8000
$ npm run dev

# Generate for staging and production
$ npm run staging
$ npm run production

If you wish to contribute. Feel free to create a pull request, issue or contact [email protected]

If you discover a security vulnerability regarding Nuxt – PlatformOS integration, please send an e-mail to [email protected]! All security vulnerabilities will be promptly addressed.

Nuxt - PlatformOS intergration is in trial. Please use with caution at your own risk. I would suggest currently only using this on a test instance or a project of your own.

[MIT]