Giter Club home page Giter Club logo

magento2-1's Introduction

  

Vue Storefront 2 integration with Magento

This project is a Magento 2 integration for Vue Storefront 2. This integration developed by superheroes from Caravel ❤️


All Contributors

How to start if you want to try out the integration

yarn global add @vue-storefront/cli
vsf init <project_name> && cd <project_name> && yarn && yarn dev

How to start if you want to contribute?

Want to contribute? Ping us on magento2-vsf2 channel on our Discord!

Requirements:

  • NodeJS v16 or later
  • Yarn (npm is not supprted yet)
  • Magento >= v2.4.3 instance for GraphQL endpoint
  • Change Magento GraphQL Query Complexity and Depth values

Don't forget to change the Magento GraphQL Query Complexity and Depth values Magento 2 by default has a lower value for the complexity of 300, and a higher value for the depth of 20. Magento 2 - Issue #32427

The changes are required, due to the size of the queries and mutations in the api-client implementation.

To do this changes, you can use the Magento 2 module, which adds a configuration panel to your admin, or do this changes manually.

To install the Magento 2 GraphQL Config module, on your Magento installation execute:

composer require caravelx/module-graphql-config

php bin/magento module:enable Caravel_GraphQlConfig

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

Find more information about the module GraphQl Custom Config

Steps

(Note: Currently only yarn is supported because of workspaces resolving. Do not use npm to install or build the project.)

  1. Fork the repo
  2. Clone your fork of the repo
    git clone https://github.com/vuestorefront/magento2.git && cd magento2
  3. Checkout develop branch
    git checkout develop
  4. Run yarn to install dependencies
    yarn install
  5. Define a store running environment by adding a STORE_ENV to your running project or execute the code
    echo "STORE_ENV=dev" >> .env
  6. Copy config/example.json to an environment named config and update GraphQL Endpoint
    cp packages/theme/config/example.json packages/theme/config/dev.json
  7. Update magentoGraphQl with url to Magento >=2.4.2 GraphQL endpoint, and the other variable accordingly to your store configurations.
    "magentoGraphQl": "https://{YOUR_SITE_FRONT_URL}/graphql",
    
  8. Build dependencies yarn build:api-client && yarn build:composables
    yarn build:api-client && yarn build:composables
  9. Run yarn dev:theme to run theme. You can find other commands in package.json
    yarn dev:theme
  • If you need HMR on Api Client/Composables run yarn dev:api-client or yarn dev:composables on a separate terminal window.

Resources

Support

If you have any questions about this integration we will be happy to answer them on magento2-vsf2 channel on our Discord.

Contributors ✨

Honorable Mentions

Thanks go to these wonderful people 🙌:


Heitor Ramon Ribeiro

💻 🚧 📖 📆

Alef Barbeli

💻 📖

Henrique Lopes

💻 📖

Đại Lộc Lê Quang

💻

Bogdan Podlesnii

💻

Patrick Monteiro

💻

Kevin Gorjan

💻

Bartosz Herba

💻

Marcin Kwiatkowski

💻 📆

Filip Rakowski

💬 🧑‍🏫 👀

Filip Sobol

💬 🧑‍🏫 👀

Patryk Andrzejewski

💬 🧑‍🏫 👀

Renan Oliveira

🔧 🔌

Dominik Deimel

💻 📖

Lior Lindvor

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

magento2-1's People

Contributors

bloodf avatar github-actions[bot] avatar filrak avatar domideimel avatar liorlindvor avatar zfmaster avatar filipsobol avatar frodigo avatar mkoszut avatar alefbarbeli avatar hcmlopes avatar aliaaaam avatar bartoszherba avatar dailoc5698 avatar jonathanribas avatar patrickmonteiro avatar renanoliveira0 avatar tom-aniol avatar andrzejewsky avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.