Create nPOS App

Nuxt integration into PlatformOS

Links

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

Installation

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. Make sure you have npx installed (npx is shipped by default since npm 5.2.0)

   To create a platformOS core project:

   npx create-npos-app <my-project> p

   Or starting with npm v6.1 you can do:

   npm init create-npos-app <my-project> p

   Or with yarn:

   yarn create-npos-app <my-project> p

   To create a platformOS module:

   npx create-npos-app <my-project>

   By default modules are created not a project. Adding 'p' or 'project' after <my-project> creates a project directly in marketplace_builder.

4. Run marketplace-kit deploy <environment> to deploy markekplace_builder to PlatformOS. Note: This can also be copied from the partner portal under the required instances command cheet sheet.

5. Update enviroment variable CDN

   Currently the only way to get the CDN's url is to use this liquid {{ '' | asset_url }}. To make this easier for your staging instance run marketplace-kit sync staging save marketplace_builder/views/pages/index.html.liquid. Next view your staging instance and copy the CDN URL. Then locate the .env file in the yourProject/nuxt/ update the stagingCDN variable to your instance CDN. For a production site you will currently have to manually produce find and replace the .env variable.

Note: Run all commands discussed in this tutorial in the project root directory, i.e. one level above the marketplace_builder directory.

Note: After installation, run nuxt commands e.g. npm run dev from the relavent directory i.e. yourProject/nuxt/

Usage

1. Change directory cd nuxt/<my-project>
2. Dev, Staging or Production

• Run the dev server with npm run dev
• Generate for staging with npm run staging NOTE: You must be synced to your Staging instance marketplace-kit sync staging
• Generate for production with npm run production NOTE: You must be synced to your Staging instance marketplace-kit sync production

Features 🎉

1. Check the features needed for your project:

   • PWA
   • Linter / Formatter
   • Prettier

2. Choose your favorite UI framework:

   • None (feel free to add one later)
   • Bootstrap
   • Vuetify
   • Bulma
   • Tailwind
   • Element UI
   • Ant Design Vue
   • Buefy
   • iView
   • Tachyons

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

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

Recommend Visual Studio extensions

If using VSCode I recommend the following or similiar extensions

• Vetur
• DotENV

Credits

This module is forked from create-nuxt-app. So the most credit is due those working on create-nuxt-app.

• egoist
• clarko
• All the contributors (list)

nuxt-platformOS intergration

• digitalfuel