The latest trends and issues around the use of open source software in the enterprise. The OpenJS Foundation is getting its party hat on – Node.js 21 has arrived. Node.js an asynchronous event ...

OpenJS Foundation: Node.js 21 arrives

If you’re a developer working with Nuxt Framework, you know how crucial it is to maintain a clean and organized codebase while building beautiful user interfaces. However, one common challenge ...

Unleash Your Creativity with the New Storybook Nuxt Module

One such tool that has been gaining significant attention and adoption is Nuxt.js. Nuxt.js is a progressive JavaScript framework that simplifies the development of powerful and performant web ...

🚀 Unlocking the Power of Nuxt.js: Building Modern Web Apps with Ease 🌐

Node.js v20.8.0 has arrived, offering performance improvements for streams in the popular JavaScript runtime environment. Node.js 20.8.0 also features a series of changes impacting doc, stream ...

Latest Node.js boosts stream performance

Vercel has released the Next.js 13.5 web framework, which features faster startups and refreshes and lower memory usage. Unveiled September 19, version 13.5 improves local server startup time by ...

Next.js 13.5 brings faster startups and refreshes

I wanted to demonstrate an example of how to implement a combination of Nuxt.js 2 and our Laravel API server. To start working with Nuxt.js 2, you need to install it: During the installation ...

Nuxt2.js auth( use laravel api server)

The Node.js team has recently released version 20.6.0, which brings improvements in environment variable configuration, module resolution, module customization, and experimental support for C++ ...

Node.js 2023 Edition Available

Nuxt.js, with its versatility and efficiency, has become the go-to framework for building powerful web applications. In the quest to simplify web development, Nuxt.js introduces – a handy helper ...

Harness the Power of useRequestURL in Nuxt.js

Are you preparing for a software engineering job interview? You might encounter questions about Object-Oriented Programming (OOP). In this article, we'll explore common OOP questions and provide ...

Cracking the Code: Mastering Object-Oriented Programming in Interviews

Vessel refers to a development environment or containerization tool that is used to streamline the setup and management of local development environments for Laravel applications. It provides a ...

Laravel Vessel

NuxtJS

nuxtjs

The Context For our podcast there was a need to speed up the YouTube cover creation process. The cover must be interesting, containing the right information and in the right format. In we only have one graphic designer, Francesca. For this reason we always try to overload it with requests, so as to automate the process as much as possible. Schrodinger Hat Why a Netflix Inspired Cover Generator? Well, if you don’t learn from the best who should you learn from? We really like the covers of the various TV series and movies in the Netflix catalog. The inspiration comes from their platform. The style clearly refers to that of Netflix albeit with a few changes and less details. We took as a reference the example of the Netflix title, a testing page dedicated to positioning and footprint. What the Project is Really About The project is a small application that makes a drag-n-drop editor so as to insert images and edit texts and clutter. It’s fully customizable and doesn’t require too many skills to tweak. The codebase is (VueJS framework) and , a JS library for HTML5 canvas interpolation. Nuxt.js KonvaJS The repository is available on our . Github The demo is available on our . demo website How Does it Work? Using Konva.JS we initialize a Canvas containing multiple layers, just like a Photoshop project. Each layer encloses a portion of the rendering: background and photos shade headings and text additional layer for additional photos / texts It is thanks to this structure that it is possible to have a game of effects, such as the gradient in Netflix style. Nuxt handles the KonvaJS API very well and this makes development and implementation of features easy and extremely fast. The Canvas element also offers a very important property such as pixelRatio. This property allows us to export and save our work in high resolution for subsequent modifications or to work with particular formats. In this way the project can solve many problems. Obviously everything could be improved, starting from the colors that could be selectable and customizable directly during the creation of a “project”. We decided to leave it like this, as if it were a PoC, precisely because it could have interesting implications and because it is our favorite theme. How Can I Get it to Work Locally? The project is portable and can be released anywhere. We have chosen Netlify. Locally it will be enough to clone the repository from the link above, install the npm modules and start the dev server via Nuxt. In README.md you will find all the instructions :) Future Implications or Future Implementations? We currently use it internally for the production of our podcast YouTube covers, but we do not hide that it could become something else in the future. We would like to create a kind of tool to speed up UI / UX testing by simply having the various components in Vue / React / * JS so as to try to render them on a canvas (a bit like if we were making a microfrontend) and verify that it is all correct in terms of design. Conclusion The project was a lot of fun to do. KonvaJS is very intuitive and the API Reference was really useful. Downloading the YouTube cover in high resolution from this tool saved us a lot of time for each uploaded video! You can find our YouTube channel . here The podcast is only available in Italian. Previously published here .

We Created a Netflix Inspired Cover Generator as a NuxtJS Project for Our YT Channel

Heroku and CircleCI : Automated CI/CD Process for a NuxtJS

Recently I came across the issue of using the module in Nuxt.js and invoking a $ in subsequent line of code in the same method. The conundrum began when the lines after the method did not execute as intended since the page was redirected to the redirect URI. auth router.push auth.loginWith It has been only a week in the Vue.js land, so I suppose this issue is something faced by many newbies. So, here goes where it all started: I have a function, whose body looks like: authenticate() { .$auth.loginWith( , { : .user }) .$router.push( .localePath({ : }))
} (e) { } try await this 'local' data this // some other line of code that shows loading msgs // ... this this path 'dashboard' catch // handling error Now, notice that once the gets invoked, the execution is handed over to the middleware of nuxt.js. Thus, using a in is redundant. line: 2 auth $router.push line:5 Before we proceed any further, let’s take a look where the auth’s configs are defined: Go to: nuxt.config.js Find the key auth auth: { : { : , : , : , : 
    }, redirect login '/login' logout '/' callback '/login' home Notice, the key. home Bingo! This is exactly where we want to tweak. Before we do any tweaking, let’s make it clear what we are trying to do and : why We want to use all the good things offered by the module, other than the thing. auth redirect The lines after the are necessary to be executed before the view can be updated. In this case it is a loading and success notification that needs to be shown before the user is redirected to the dashboard upon successful login. $auth.loginWith Now, the only thing left to do is disabling the redirect case in option auth will do the job! home: false The object in would look like this now: auth nuxt.config.js auth: { : { : , : , : , : }, redirect login '/login' logout '/' callback '/login' home false Bam! We are done. Previously published at https://medium.com/consol/using-auth-modules-redirect-in-tandem-with-router-push-in-nuxt-js-d6d703e0a85a

Using $auth Module’s Redirect in Tandem With $router.push in Nuxt.js

Install a Cosmic-powered Nuxt.js App on Digital Ocean in 5 minutes

Check out this built on and . It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search. website boilerplate Nuxt.js Cosmic JS TL;DR Download the GitHub repo Check out the demo. Features Fully responsive down to mobile w/ frontend Bootstrap SEO ready A contact form that sends an email to your email(s) of choice and to for easy reference Cosmic JS Full-site search functionality All content is easily managed in including pages, blog and contact info. Sign up for to install the demo content and deploy this website. Cosmic JS Cosmic JS Get started git ://github.com/cosmicjs/nuxtjs-website-boilerplate
cd nuxtjs-website-boilerplate
npm install clone https Import the file into your Cosmic JS bucket. To do this go to Your Bucket > Settings > Import / Export Data. bucket.json Run in production =your-bucket-slug npm start COSMIC_BUCKET Go to http://localhost:3000 Run in development Create a file and match it to with your values. config/development.js config/production.js npm run development Go to . http://localhost:5000 Env vars As it states on the , you will need to set the environment variable HOST to 0.0.0.0. This is already done in the package.json script for you, but you could also set this on the “Set Environment Variables” section located in Your Bucket > Settings > Deploy Web App. Nuxt.js website Config Because Node.js doesn’t have a mail server, the contact form uses to send the email. So add the following constants in the config file. mailgun

Nuxt.js Website Boilerplate

For the past few hours, I've been working on dockerizing a Nuxt.js server-side rendering app to be deployed to AWS Elastic Container Service (ECS). I hit a stone wall when environment variables are not properly injected on runtime on ECS. In this post, I will walk us through steps to properly dockerize Nuxt.js SSR apps and share some of the lessons I learnt. There are 2 major ways to dockerize Nuxt.js apps, and each of them has its shortcomings: 1. : The Nuxt app is built after Docker image is built, when the container is spawned. The downside of this is the container boot time takes significantly longer as it involves building the artifacts on run. This also violates the principle of a 12-factor app. Nuxt build on run build/release/run 2. : For this, sensitive environment variables are injected during stage. The upside is the boot time is much shorter now, hence, quicker revert time in case you need to revert to an older version. However, the downside is the sensitive variables are now bundled into our Docker image and it requires a rebuild every time a variable is updated. Nuxt build on Docker build docker build For this post, I will be using the first method, "Nuxt build on run". How environment variables works in Nuxt.js apps? Let's revisit how environment variables work in Nuxt apps. Some of us may already be familiar with the property in , which allows us to inject sensitive values from your terminal environment to the app on  runtime. env nuxt.config.js { : { dbUri: process.env.DB_URI  
  }
} // in nuxt.config.js export default env /**
      * dbUri is accessible from both client and server side.
      */ From the snippet above, is read and injected to when we run the app for any purpose. ( , or ) When serving a production build, our environment variables are most likely different from environment to environment. Thus, if we build our app ( ) as part of the building steps of our Docker image, any sensitive environment variables that is injected when we run our Docker image ( ) will not work as the artifact has been built before these variables are injected. DB_URI dbUri nuxt start nuxt build nuxt nuxt build docker run ... How to safely inject environment variables into Dockerized Nuxt.js on runtime? By adopting " ", we adhere to: Nuxt build on run Principle 1: Build and serve on runtime! Principle 2: Never embed any sensitive value in Dockerfile {
  ... : {
    ... : , : , : ...
  }
  ...
} "scripts" "build" "nuxt build --modern=server" "start" "nuxt start" "prod" "yarn build && yarn start" To serve a production build, all we need to do is to run . yarn prod In my : Dockerfile node: . APP_DIR /app/ HOST . FROM 10.16 3 ENV WORKDIR ${APP_DIR} COPY . ./ RUN yarn install ENV 0.0 0.0 # Insensitive environment variable EXPOSE 3000 CMD [ , ] "yarn" "prod" Here we go! Our dockerized Nuxt app is ready. We can run our Docker image using or alternatively with Docker Compose. I personally use Docker Compose a lot. In my case, I created a that inject environment variables from the file in same directory. docker run docker-compose.production.yml .env My : docker-compose.production.yml version: "3" services: web: build: . restart: always env_file: - .env ports: - "3000:3000" Once ready, we run to bring up our containerized Nuxt app. docker-compose -f docker-compose.production.yml up -d How to safely inject environment variable for dockerized Nuxt.js on AWS ECS This section is only applicable if you choose ECS as your deployment platform of choice. In this section, I will walk us through: storing sensitive values using AWS SSM Parameter Store building and pushing image to image registry creating an ECS task Step 1: Storing Sensitive Environment Variables in Parameter Store AWS provides several products for the purpose of storing sensitive configurations, namely AWS SSM Parameter Store and AWS Secrets Manager. I use Parameter Store because of its' free 10,000 Standard tier parameters. To add a parameter, click "Create Parameter" in the Parameter Store Management Console: Fill up the form, then submit: We should see the parameters created: We will leave the parameters created for now. These will be consumed in a latter step. Step 2: Building and Pushing Image to Image Registry To deploy our Nuxt.js app to AWS ECS, we first require a repository to store our Docker image. For the sake of simplicity, I use AWS Elastic Container Registry (ECR). The provides a comprehensive list of steps to create a repository on AWS ECR. official guide Once the image repository is created, we can then build and push our image: docker build -t <image_name> . 

docker tag <image_name>:latest <remote_repository_url>

docker push <remote_repository_url> $ (aws ecr get-login --no-include-email --region <region>) Navigating to our repository with AWS Management Console, we should see our image pushed: Step 3: Create an ECS Task This details the steps to create a Task definition in ECS. It is highly suggested to read if you are not familiar with the concepts of Task and Service in ECS before moving forward. guide this While creating an ECS Task with the Management Console, you can now reference to parameters created in SSM Parameter Store by using the ARN of the parameters. Once the Task is created, we can then run it on ECS. Navigating the the endpoint of your Task, you should be able to see your app is up and running. Voila! Now we have a dockerized Nuxt.js SSR app that is running on ECS with sensitive environment variables stored on SSM Parameter Store. Have fun hacking around! This was first published on melvinkoh.me

Dockerizing and Deploying Nuxt.js SSR Apps To AWS ECS

offers a headless CMS that enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team ends up saving time in the process. To demonstrate how easy it is to get started with Cosmic JS, I’ll quickstart a using the and connect it with my Cosmic JS Bucket Dashboard. Cosmic JS Nuxt.js Website Boilerplate Cosmic JS CLI TL;DR: Nuxt.js Website Boilerplate Nuxt.js Website App Page Developer Docs Nuxt.js Knowledge Base Developer Articles: Nuxt.js QuickStart a Nuxt.js Website using a Headless CMS API is an example of a robust headless CMS and API that’s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have , , , and Starters to help you get your project started quickly. There are over 70 app examples available in the Cosmic JS Apps Marketplace to speed up your project as well. Today we’ll be using the to quickstart a . Cosmic JS Node.js React Vue Gatsby Serverless Cosmic JS CLI Nuxt.js Website Boilerplate This website boilerplate satisfies some common website requirements including: dynamic pages blog articles author management SEO ability contact form website search 🛠️ Installation Install via the Cosmic CLI : I set up an example Bucket for this blog: Run for a list of all commands. Run for details on options for a specific command. You're now up and running with a that can be managed entirely from your Cosmic JS Bucket Dashboard and Command Line Terminal tool of choice. cosmic -h cosmic [command] -h Nuxt.js Website Boilerplate Conclusion I was able to easily install a using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn’t quick enough, check out the from Cosmic JS to get a project up and running in seconds. 🔥 Nuxt.js Website Boilerplate Starter Apps If you have any comments or questions about building Nuxt apps with Cosmic JS, and . reach out to us on Twitter join the conversation on Slack

QuickStart a Nuxt.js Website Using a Headless CMS API

Since I started making websites 3.5 years ago I’ve been using Sass. I flipping LOVE IT!!! I feel it fills in a lot of CSS’s missing features as well as making my styles much leaner and easier to work with. I’m trying to really make 2018 a year where I conquer VueJs. There’s a problem. I still want to have my Sass variables, functions and mixins available to all my single file Vue components. I also want to have a bunch if global CSS utility classes being created using the same variables, functions and mixins. Here’s how I go about this. Compiling Sass I have a collection of styles that I port over to each now project no matter whether I’m using , Rails or WordPress. (Badger SCSS will be getting released in April 2018). All my CSS selectors are utility classes that I wanted available for my Nuxt project. It’s super easy to do! I have a single Sccs file that I use to import all my separate SCSS files so this will be the file I want to compile from. You can include multiple files if you’d like but I really recommend having a single clean file that just takes care of all your importing. Vue.js Toolkit Ensure you and installed; node sass sass-loader npm i -D node-sass sass-loader 2. In your file include your SCSS where you import all your other SCSS. nuxt.config.js css: ['@/assets/scss/main.scss'] LIKE MAGIC! Now your SCSS is getting compiled and will be automatically inserted into a tag in your head. <style> For more info checkout the Nuxt.js docs on CSS. Edit 2/2/2019 — Updated Nuxt module instructions Nuxt Style Resources Module The awesome Nuxt community has created a package to take away ALL the pain of exposing Sass/SCSS files to your Vue.js components. While I did manage to expose files without this package, it was a bit of a pain. Install the package; npm i -D 2. You’ll need to make Nuxt aware of which file you want to be exposed by updating your ; nuxt.config.js module.exports = {// Other nuxt.config.js modules: \['@nuxtjs/style-resources'\],  
styleResources: {  
    scss: \[  
        'assets/scss/file/\_path.scss',  
        'assets/scss/file/\_path-two.scss'  
    \]  
} } It’s really THAT simple. For more information and detailed docs checkout the . Nuxt Style Resource loader’s Github repo Any questions/comments/bugs/feedback please get in touch! Thanks for reading. Old loading Sass loading plugin This plugin is now deprecated but this was how I used to access but this was my old instructions Nuxt Sass Resources Loader The awesome has created a package to take away ALL the pain of exposing Sass/SCSS files to your Vue.js components. While I did manage to expose files without his package, it was a bit of a pain. If you’re keen to do it on your own check out this Github issue thread where Sébastien Chopin shows you how to do it. Antério Vieira Install the package; npm i nuxt-sass-resources-loader 2. You’ll need to make Nuxt aware of which file you want to be exposed by updating your ; nuxt.config.js module.exports = {// Other nuxt.config.js modules: \[  
    \[  
        'nuxt-sass-resources-loader',   
        \[  
            'assets/scss/file/\_path.scss',  
            'assets/scss/file/\_path-two.scss'  
        \]  
    \]  
\] } It’s really THAT simple. For more information and detailed docs checkout the . Nuxt Sass resources loader’s Github repo

How I use Scss variables, mixins & functions globally in Nuxt.js

Photo by on Austin Neill Unsplash Three years ago, we fell down a rabbit hole. We landed in a strange frontier of web development. Talks of “static” and “serverless” sites, dedicated APIs, and burgeoning frontend wonders were common. JavaScript was everywhere. Developers were excited to build sites again. We had entered the universe. JAMstack On our blog, we’ve already discussed countless to store content and JS frameworks to render it. headless CMS Today, we keep exploring: 1) , an API-first CMS recommended by a friend, and 2) , a kickass Vue.js framework (we’ve wanted to use it ). Cockpit CMS Nuxt.js ever since we fell in love with Vue We’ll cover: How to set up a Cockpit CMS installation & plug it with Snipcart. How to use Nuxt.js static generation to render the frontend of our app. The result? A full JAMstack app: headless content management, frontend rendered in a JS framework, & shopping through an e-commerce API. We’ll also throw in a live demo and code repo at the end! But first, a few important definitions. What is Cockpit CMS? Our content data will be stored in : Cockpit Cockpit is an open source, API-driven CMS that lets you implement your site without compromises. Developer crafted a system made to build simple dynamic websites without jumping through the hoops of WordPress, Drupal and the likes. Artur Heinze Its API-first approach (aka “headless”) allows for content management that is from content rendering. You can learn more about it . decoupled in this primer on headless CMS Cockpit runs on PHP and is, at its core, a developer-first CMS. Here are some of its cool features: Self hosted : runs on a , no need for full SQL server Fast & lightweight lightweight database engine : implement on your site the way you want Flexible : easy for devs to create their own modules Expandable Modern & simple UI : markdown, assets, thumbnails, etc. Built-in tools What is Nuxt.js? will have our frontend covered for this one. Nuxt.js We had the chance to a lot lately, and were naturally intrigued by the Vue application framework that is Nuxt. play with Vue.js In a nutshell, Nuxt allows you to create apps where your can execute on both client and server. Universal Vue.js JavaScript Its main scope is UI rendering while abstracting away the client/server distribution. Like Vue, it can be used to start a project from scratch, or to improve on an existing one. Inspired by , Nuxt is a go-to solution for building SSR (Server Side Rendered) Vue apps. It’s also pretty good at generating static sites, thanks to its command. React’s Next.js generate And here’s a peek at how this little marvel actually works: Nuxt.js rendering process [source] We’ve seen comprehensive Nuxt.js examples & tutorials pop up ( & ) recently. In this one, we’ll see how an actual integration of Nuxt.js with an API-first CMS can work. here here Cockpit CMS Tutorial with Nuxt.js & Snipcart Pre-requisites Before building our awesome cosplay shop demo (yup, that’s right), you’ll need: If you are hosting Cockpit locally PHP >= 5.4 PDO with SQLite support (or MongoDB) GD extension enabled If you are hosting it somewhere A web server with the above specs (forever free in Test mode) A Snipcart account 1. Installing Cockpit CMS Go to the CMS . We’ll use the “Official release” here, to avoid unstable features. download page I’ll install Cockpit on its own instance. It’ll then be possible to access it with , and the public website with . cockpit.local snipcart-shop.local Once the installation is complete, go to to finish up. cockpit.local/install If you intend to push this installation live, . you should change your username and password 2. Creating products to sell with Snipcart We’ll create products in our CMS first. Start a new called . A is a way to hold all the content from a data structure. It's in a way the bread and butter of Cockpit CMS; lots of operations are done in this section. collection Product collection In this collection, we add the following fields: A field named . text Name A field named . text Description A field named . media Image A field named . text Price We now have to generate an API key to use Cockpit’s services, to do so, go to Settings (hamburger menu, top left corner), then General > API > Generate API token. Finally, we only need to add our products to our shop’s content repo: For this demo, we installed Cockpit on an Azure free site. It was very easy to set up: we pushed our code on GitHub and enabled automatic Git deploys in Azure. 3. Using & understanding Nuxt.js For the client-facing store itself, we’ll dive into Nuxt. First off, I must say I working with Nuxt. It’s super straightforward, their documentation is neat, and, as you already know, we’re currently on a honeymoon with Vue.js. loved First thing to get started is to install Nuxt and scaffold our project. We’ll need installed. If you don't have it, run: . vue-cli npm install vue-cli -g Then, we’ll scaffold the project with the Nuxt starter template: That’s it for the installation. You can start the dev server using: npm run dev Nuxt.js key concepts Let’s talk a bit about how Nuxt works. The first thing to understand is the . A page in Nuxt is kind of a . It's a Vue component that will be automatically added to the application routes. For instance, in the default files, you have this component: . This component will be rendered when you hit your application root URL at (if you're running the dev server). pages route pages/index.vue http://localhost:3000 If you want to create a products page, you could add a component named in the folder and then you would get this URL working: products.vue pages [https://localhost:3000/products](https://localhost:3000/products.) . Nuxt takes care of the routing automatically; you don’t have to register routes or anything. The component will be mounted instantly, and you will even be able to render a statically generated site with it. We’ll do this later in the tutorial. There’s also another important concept in Nuxt: . You'll see this folder in the project created by the starter template. In it, you'll want to add child components to be used in your pages. We'll create one in the post. components Another thing we’ll see are the . Layouts are used to define the skeleton of your site, it's usually where you will add your navigation and footer for example. layouts Last thing we’ll tackle is the file. It allows you to define which libraries or CSS you want to include globally and . nuxt.config.js much more You can also add your own configuration settings if needed. This is what we’ll do first, with Cockpit settings. We’ll use these when calling Cockpit CMS API to retrieve products data. Configuring Nuxt.js Open and add: nuxt.config.js We’ll replace with our own URL and with the API token we've generated in Cockpit. <cockpit-url> <api-token> You’ll now have access to these environment variables in your pages. Creating our layout Before creating the first page, we’ll need to make some changes to the layout. In addition to and , Nuxt also has a concept of layouts. Consider it a "master" page. This page must contain a special tag: . pages components <nuxt /> Mine looks like: Page components will be rendered inside the tag. <nuxt /> Creating pages Now for our first page. Open and remove everything. Let's start from scratch. index.vue We’ll begin by creating the template part of the component. This template will be in charge of rendering all products. Asking yourself where do the classes come from? I used , a CSS framework for the demo. It provides useful components and styles to get a good looking demo quickly. columns, is-mobile, is-multiline, is-centered, etc. [Bulma](http://bulma.io/) To add the reference to , I opened and added this object in the array: Bulma nuxt.config.js link While we’re here, we’ll also add Snipcart’s default CSS: Our head object should now look like: Any stylesheets added there will be included automatically in all pages. Notice the tag? This is a component we'll create later. small-product Now, we need to fetch our products. Nuxt provides a very awesome method for pages component: . asyncData It's important to know that this method can't be used in child components, only in pages components. This method will allow us to fetch data remotely before rendering the page itself. It’s especially useful when creating a static site! To interact with Cockpit API, we’ll use , a popular HTTP client in JavaScript: Axios npm install axios --save Our component should look like: In the method, I used Axios to fetch my products and generate thumbnails. Cockpit offers API endpoints for that. Notice the parameters the method receives: . The object will contain the settings set in . asyncData {env, params} env nuxt.config.js Your page component will receive a list of products when mounted. Awesome, right? Creating components For this to work, we’ll need to create the component . In the folder, create a new file named . SmallProduct.vue components SmallProduct.vue This component will render product details and Snipcart’s buy button. Now run: npm run dev Open your browser to and you should see something awesome! http://localhost:3000 4. Deploying our JAMstack bundle Job’s (almost) done! Our Cockpit + Nuxt store lacks one last thing: deployment. As we often do, we’ll use Netlify for hosting. Just create a new site in Netlify and use: npm install && npm run generate We’ll set the publish directory to . dist Give Netlify some time to build your site, and you’re done! GitHub repo & live demo Go ahead, check out the demo & code repo for this tuts! See GitHub code repo See live Cockpit + Nuxt.js demo Conclusion Well, this was a long one. I’ll keep the outro brief. ;) While Cockpit doesn’t offer hosted instances, it provides developers with a very malleable content API. Especially if you’re a PHP fan. Based on my tests, perf looks quite good & stable too. It’s still a young, free headless CMS, and there’s room to improve, visually and functionally speaking. Good news is: it’s ! So don’t hesitate to jump in and collaborate. open source As for Nuxt, well, I loved it! I guess it transpired enough in the post. Please give it a try if you want to fast-track SSR or static Vue apps development. If you’ve enjoyed this post, please take a second to share it on Twitter . Comments, questions? Section below is all yours! I originally published this on and shared it in our . the Snipcart Blog newsletter https://upscri.be/hackernoon/

A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstack

In this tutorial I’m going to show you how to create a “Tutorials Portfolio” app using , and . For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic JS API in order to retrieve, update, and delete data in our Cosmic JS buckets. Let’s get started. Nuxt.js Cosmic JS TL;DR Download the GitHub repo. Check out the demo. Getting Started: First, let’s make a new directory to build our project in and lets also make a package.json file. mkdir cosmicapp-tutorials cosmicapp-tutorials$ touch package.json Now, in your package.json, copy and paste the code below: { "name": "cosmicapp-tutorials", "version": "1.0.0", "description": "Nuxt.js project", "author": "kutsaniuk@gmail.com", "private": true, "scripts": { "dev": "NODE_ENV=development nuxt", "build": "nuxt build", "start": "npm run build; NODE_ENV=production HOST=0.0.0.0 nuxt start" }, "dependencies": { "axios": "^0.16.2", "body-parser": "^1.17.2", "cross-env": "^5.0.5", "express": "^4.15.3", "express-session": "^1.15.3", "http": "0.0.0", "nuxt": "^1.0.0-rc11", "sha1": "^1.1.1", "vue-notification": "^1.3.4" }, "devDependencies": { "babel-eslint": "^7.2.3", "eslint": "^4.3.0", "eslint-config-standard": "^10.2.1", "eslint-loader": "^1.9.0", "eslint-plugin-html": "^3.1.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.1.1", "eslint-plugin-promise": "^3.5.0", "eslint-plugin-standard": "^3.0.1" } } Second, let’s make a nuxt.config.js file. cosmicapp-tutorials$ touch nuxt.config.js Now, in your nuxt.config.js, copy and paste the code below: //cosmicapp-tutorials/nuxt.config.js const bodyParser = require('body-parser') const session = require('express-session')

 module.exports = {

 dev: (process.env.NODE_ENV !== 'production'), head: { title: 'cosmicapp-tutorials', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, loading: { color: '#585858' }, build: { vendor: ['axios', 'vue-notification'] }, serverMiddleware: [ bodyParser.json(), session({ secret: 'super-secret-key', resave: true, saveUninitialized: false, cookie: { maxAge: 60000 } }), '~/api' ], env: { bucketSlug: process.env.BUCKET_SLUG || 'tutorials', readKey: process.env.READ_KEY || 'anyI1DP1bxB5ivjCaJSRC0ZFxB5SJDpfYgrDfR47fw7HIlWYAX', writeKey: process.env.WRITE_KEY || 'J72v1YeK8zZF6n0dI8yhiVTzQy75JASppAQe8XPykiJHW9ARfz' } } Building our app: Now we’re going to build out our file structure a bit more so that we can organize our vue files. This is what our cosmicapp-tutorials directory should look like: cosmicapp-tutorials |----api | |----index.js |----assets | |----css | |----fonts | |----images | |----sass |----layouts | |----default.vue |----middleware | |----auth.js |----pages | |----add | |----index.js | |----articles | |----_id.js | |----blog | |----index.js | |----edit | |----_id.js | |----login | |----index.js | |----profile | |----_id.js | |----register | |----index.js | |----index.vue |----static |----store |----nuxt.config.json |----package.json Now we we will set up our default.vue. Copy and paste the following code into your default.vue file: <template><div v-bind:class="{ 'is-menu-visible': isMenuVisible}"><div id="wrapper"><header id="header"><div class="inner"><nuxt-link to="/" class="logo"><span class="symbol"><img src="~/assets/images/logo.svg" alt=""/></span><span class="title">Tutorials</span></nuxt-link><pre v-bind="$store.state.authUser"></pre>   
    <nav @click="isMenuVisible = true">  
    <ul>  
    <li><a href="#menu">Menu</a></li>  
    </ul>  
    </nav>

    </div>  
    </header>  
    <nuxt/>  
    <footer id="footer">  
    <div class="inner">  
    <ul class="copyright">  
    <li><img class="cosmic-logo" src="https://cosmicjs.com/images/logo.svg" width="20" height="20"><a href="https://cosmicjs.com/">Proudly powered by Cosmic JS</a></li><li>Copyright: <i class="fa fa-copyright"></i> Photography Portfolio App 2017</li>  
    </ul>  
    </div>  
    </footer>  
    </div>  
    <nav id="menu" @click="isMenuVisible = false">  
    <div class="inner">  
    <h2>Menu</h2>  
    <ul>  
    <li><nuxt-link to="/">Home</nuxt-link></li>

    <li v-if="!$store.state.authUser"><nuxt-link to="/login">Login</nuxt-link></li>  
    <li v-if="!$store.state.authUser"><nuxt-link to="/register">Register</nuxt-link></li>

    <li v-if="$store.state.authUser"><nuxt-link v-bind:to="'/profile/' + $store.state.authUser.user\[0\].value">Profile</nuxt-link></li>  
    <li v-if="$store.state.authUser"><a href="#" @click="logout()">Logout</a></li>  
    </ul>  
    </div>  
    <a class="close" @click="isMenuVisible = false" href="#menu">Close</a>  
    </nav>  
    </div>

    </template>

    <script>  
    export default {

    data () {  
    return {  
    isMenuVisible: false  
    }  
    },  
    methods: {  
    async logout () {  
    await this.$store.dispatch('logout')  
    }  
    }  
    }  
    </script>

    <style src="~/assets/css/main.css"></style> After that we can create index.vue. Copy and paste the following code into your index.vue file: <template> <div id="main"> <div class="inner"> <header> <h1>You are browsing the best resource <br> for Online Education.</h1> <p>Just clear crisp and to the point content, nothing else.</p> </header> <section class="tiles"> <article v-bind:class="'style' + (index + 1)" v-for="(article, index) in articles"> <span class="image"> <img v-if="article.metadata" :src="article.metadata.image.url" alt=""/> </span> <nuxt-link v-bind:to="'/articles/' + article.slug" class="logo"> <h2>{{article.title}}</h2> <div class="content" v-html="article.content"></div> </nuxt-link> </article> </section> </div> </div> </template>

 <script> import axios from 'axios'

 export default {

 asyncData () { return axios.get(`https://api.cosmicjs.com/v1/tutorials/object-type/articles?read_key=${process.env.readKey}`) .then((res) => { return { articles: res.data.objects } }) }, head () { return { title: 'Tutorials' } } } </script> Now we we will set up our store/index.vue. Copy and paste the following code into your store/index.vue file: import axios from 'axios';var sha1 = require('sha1'); export const state = () => ({authUser: null}) export const mutations = {SET_USER: function (state, user) {state.authUser = user}} export const actions = {// nuxtServerInit is called by Nuxt.js before server-rendering every pagenuxtServerInit ({ commit }, { req }) {if (req.session && req.session.authUser) {commit('SET_USER', req.session.authUser)}},async login ({ commit }, { username, password }) {axios.get('https://api.cosmicjs.com/v1/' + process.env.bucketSlug + '/object-type/users/search', {params: {metafield_key: 'username',metafield_value_has: username,limit: 1,read_key: process.env.readKey}}).then(function (response) {if (response.data.status !== 'empty') {axios.get('https://api.cosmicjs.com/v1/' + process.env.bucketSlug + '/object-type/users/search', {params: {metafield_key: 'password',metafield_value: sha1(password),limit: 1,read_key: process.env.readKey}}).then(function (response) {if (response.data.status !== 'empty') {axios.post('/api/saveSession', response.data.objects[0]).then(function (response) {commit('SET_USER', response.data);window.location.href = '/profile/' + username;});}}) }  
        })  
},  
async register ({ commit }, { username, password }) {  
    axios.post('https://api.cosmicjs.com/v1/' + process.env.bucketSlug + '/add-object', {  
            write\_key: process.env.writeKey,

            title: username,  
            type\_slug: 'users',  
            slug: username,  
            metafields: \[  
                {  
                    key: "username",  
                    type: "text",  
                    value: username  
                },  
                {  
                    key: "password",  
                    type: "text",  
                    value: sha1(password)  
                }  
            \]  
        })  
        .then(function (response) {  
            axios.post('/api/saveSession', response.data.object)  
                .then(function (response) {  
                    commit('SET\_USER', response.data);  
                    window.location.href = '/profile/' + username;  
                });  
        });

},  
async logout ({ commit }) {  
    await axios.post('/api/logout')  
    window.location.href = '/login';  
    commit('SET\_USER', null)  
} } Now we we will set up our auth.js. Copy and paste the following code into your middleware/auth.vue file: export default function ({ store, error }) {if (!store.state.authUser) {error({message: 'You are not connected',statusCode: 403})}} What’s going on here: We created default layouts. We created store/index.js for login, register and sessions. We created middleware/auth.js for checking that user logged in. Conclusion: We were able to consume the Cosmic JS API with our actions and dispatcher functions. I hope you enjoyed this tutorial as much as I did, if you have any questions and . reach out to us on Twitter join our community on Slack

Stories, News & Mentions about NUXTJS

Categories

Trending Topics

Stories, News & Mentions about NUXTJS

Nuxtjs’s Stories on HackerNoon

Nuxtjs's News & Mentions

Categories

Trending Topics