Tag: strapi

How to enable Editorjs plugin in Strapi

How to enable Editorjs plugin in Strapi


Strapi allow us to pick an editor for Ritch Text content field through plugins. If you require a block editor, Editorjs plugin all you need.

Editorjs Plugin

Go to the Marketplace section of admin panel and copy the npm installation snippet.

Paste the snippet in the terminal (at the root of the strapi project)

yarn add strapi-plugin-react-editorjs

You may already tried, rerunning the strapi and the editor look the same.

Next step is to build strapi admin UI. Stop the running strapi project and issue build command 

yarn build

Now restart strapi with npx strapi develop and you will meet the new editor.

How to integrate Strapi-graphql in Nuxt 2

How to configure strapi CMS using graphql in Nuxt


Strapi a opensource headless CMS for developing content rich applications using Javascript.

Nuxt is a framework on top of the Vue progressive JavaScript framework. Along with Vuejs it offers fast development, with minimal bundle size and performance upgrade over other frameworks.

Integrating Strapi using Apollo in Nuxt

Strapi exposes API for each collection types and have corresponding API end points. So graphql can consume it.

Graphql allow us to query data required. May be we not need the entire REST API data. Graphql can installed as on strapi with zero configuration. Once you are ready with strapi configure Apollo using the nuxt module.

Configure @nuxt/apollo

Install the strapi dependency 

yarn add --dev @nuxtjs/apollo

also need to configure the nuxt config.

export default {
  modules: ['@nuxtjs/apollo',
  ],
   apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: process.env.BACKEND_URL || "http://localhost:1337/graphql",
      }
    }
  },
}

Gql queries ?

Let’s prepare our first Graphql query. In the project add a folder apollo/queries/category/articles-categories.gql with following 

    query {
      categories {
        data {
          id
          attributes {
            name
          }
        }
      }
    }

Executing Graphql queries in Page component

In the index.vue page or in any page we can execute the query as follows

 <script>
    import articlesQuery from "~/apollo/queries/categoris/articles-categories";
    
    export default {
      data() {
        return {
          category: {
            data: [],
          },
        };
      },
      
      apollo: {
        category: {
          prefetch: true,
          query: articlesQuery,
          variables() {
            return { id: parseInt(this.$route.params.id) };
          },
        },
      },
    };
    </script>

How to integrate Strapi in Nuxt3

How to configure strapi CMS in Nuxt 3


Strapi a opensource headless CMS for developing content rich applications using Javascript.

Nuxt 3 is a framework on top of the Vue 3 progressive JavaScript framework. Along with Vuejs 3 it offers fast development, with minimal bundle size and performance upgrade.

Integrating Strapi in Nuxt 3

Strapi exposes AP for each collection types and have corresponding API end points. So we can either use fetch methods or axios for data fetching. Nuxt 3 has its own module to handle strapi operations.

Configure @nuxt/strapi

Install the strapi dependency 

yarn add --dev @nuxtjs/strapi

also need to configure the nuxt config.

export default {
  buildModules: ['@nuxtjs/strapi'],
  strapi: {
  url: process.env.STRAPI_URL || 'http://localhost:1337',
  prefix: '/api',
  }
}

How to access collections ?

We can access the strapi collections using find, findOne methods, that the module provides.

<script>
 
export default {
  data() {
    return {
       
      products: [],
      categories:[]
       
    };
  },
 
  async mounted() {
    const { find } = useStrapi4()
    this.products=await find("products")
     this.categories=await find("categories")
  },

  components: {},
};
</script>

The useStrapi4() hook will return the async functions to retrieve data we needed.

How to create a strapi project with Docker on Windows

How to create a strapi project with Docker in Windows


Starpi is new gen CMS for Node based projects, and it help us to build and manage content using customizable Admin UI.

Docker : When start using different technologies and database, Docker can make dev work easier. Developer usually need to work with different databases,frameworks, languages etc, which require super awesome computer.

Docker container help us to run development environment within a disposable,light weight container, it can include, Mysql, Mongo, Strapi and more etct .. Each container working based on Docker Images. You can explore more about Docker Images @ Docker Hub

How to start

First we need Docker for desktop get installed in Windows machine and then we need to use the Docker image to create strapi project. You need a Linux Subsystem get installed on Windows for proper working of Docker.

On the terminal please issue the following command create a project at the drive E named starpiProject.

docker run -it -p 1337:1337 -v E:\starpiProject:/srv/app strapi/strapi

This will run a docker container with interactive terminal mode (-it) and use local storage or volume which will create a strapi project starpiProject (on drive e) folder and run at the port of localhost:1337.

You can visit the the local host in a web brower which welcome you with user signup form.

Run the existing Project ?

The same command can be work for us and in case of non existed project, new one will be created.

docker run -it -p 1337:1337 -v E:\starpiProject:/srv/app strapi/strapi

Have a look at these docker posts