Benefits of Integrating AEM with vue.js<\/b><\/h3>\n\n- Improved performance and speed<\/span><\/li>\n
- Enhanced user interface and interactivity<\/span><\/li>\n
- Consistent code structure and organization<\/span><\/li>\n<\/ul>\n
Creating Vue.Js project and component<\/b><\/h3>\n
Prerequisites<\/span>:<\/span><\/p>\n\n- System node js version must be greater than 11.<\/span><\/li>\n<\/ul>\n
Step 1<\/span><\/p>\n\n- Go to aem-guides-wknd directory and create a project <\/span>vue-app<\/b> by following the below steps.<\/span>
\n<\/span>1. <\/span>Install Node.js<\/b> – Before getting started, make sure you have Node.js installed on your system. You can download the specified version from the official Node.js website(<\/span>https:\/\/nodejs.org\/<\/span><\/a>).<\/span><\/li>\n<\/ul>\n\n- Install Vue CLI – <\/b>Vue CLI is a command-line tool that makes it easy to create and configure Vue projects. To install Vue CLI, open a terminal and run the following command: <\/span>npm install -g @vue\/cli.<\/b>
\n<\/b>This command will install Vue CLI globally on your system, allowing you to access the Vue CLI command-line interface from any directory.<\/span><\/li>\n- Create a New Project<\/strong> – Once you have Vue CLI installed, you\u2019re ready to create a new Vue project. Follow these steps:\u00a0<\/span>\n
\n- Open aem-guides-wknd directory.<\/span><\/li>\n
- Run the following command to create a new Vue project:<\/span>
\n<\/span><\/p>\nvue create vue-app<\/b><\/pre>\n<\/li>\n- You will be presented with a list of preset configurations. You can choose from the default options or select a manual configuration to customize the features of your project.<\/span><\/li>\n
- Once you\u2019ve selected a configuration, Vue CLI will start installing the necessary dependencies and generate the basic structure of your project.<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
\n- After that your project named \u2018vue-app\u2019 will be created and the hierarchy will be like this.<\/span><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/vuestr.png\")
<\/p>\n
Vuejs Component creation and integration inside AEM<\/b><\/b><\/h2>\n
Purpose : Creation of three independent components i.e. checked items, item review, and items action.checkeditems component will show lists of items with add\/remove button. After clicking on add, it will added to item review component, the button will be changed to remove, and if it is eligible for an offer it will be added to itemsaction component.<\/span><\/p>\nComponent creation<\/b><\/p>\n
Step 1<\/span><\/p>\n\n- Create three component named \u2018<\/span>Checkitems.js<\/b>\u2019,\u201d<\/span>Itemreview.js<\/b>\u201d,\u201d<\/span>Itemsaction.js<\/b>\u201d inside components folder.<\/span><\/li>\n<\/ul>\n
\n<\/span>We will create <\/span>new vue<\/b> to instantiate the component, then inside the <\/span>data <\/b>property initialize all properties,<\/span>mounted <\/b>hook is often used to perform one-time initialization logic, such as fetching data from an API or setting up event listeners.<\/span>methods<\/b> will be used for all dom actions related to the component.<\/span><\/p>\nAttached are some screenshot below:-\u00a0<\/span><\/p>\n
\n<\/span>![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/checklist.png\")
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/itemreviw.png\")
<\/span><\/p>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/itemacton.png\")
<\/span><\/p>\n\n- To communicate between components, I will create a shared folder and create an <\/span>EventBus,js<\/b> file to send\/receive Data.\u00a0<\/span><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/eventbus.png\")
<\/p>\n
\n- Create a css folder and add a respective css file for each component i.e <\/span>checklist.css,<\/b>
\n<\/b>Menusreview.css,itemactions.css.<\/b><\/li>\n<\/ul>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/checkcss.png\")
\u00a0<\/span><\/span><\/p>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/itemactioncss.png\")
<\/span><\/p>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/menucss.png\")
<\/span><\/p>\n\n- Create three AEM components <\/span>checklistitems.html,itemreview.html,itemaction.html<\/b> inside <\/span>ui.apps\/src\/main\/content\/jcr_root\/apps\/wknd\/components. <\/b>Along with that write the HTML using vue.<\/span>v-for <\/b>is used to display the list of items.<\/span>@click<\/b> is used for performing the click event. Attached are some screenshot below.<\/span><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/actionhtml.png\")
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/checkhtml.png\")
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/reviewhtml.png\")
<\/span>
\n<\/span><\/p>\n\n- After creation, import the component inside the main.js file of vue. Delete the App.js file inside the directory.<\/span>checkItems<\/b>,<\/span>Itemsaction<\/b>,<\/span>itemsreview <\/b>are parent classes of each component. We will integrate it by like this.Attached is a screenshot below:<\/span>
\n<\/span><\/li>\n<\/ul>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/mainjsfile.png\")
<\/p>\n
Component Build and Integration<\/b><\/h2>\n
We are going to build the vue app by custom webpack configuration. So that the final build file will be stored inside the ui.apps folder.<\/span><\/p>\n\n- Create a <\/span>webpack.config.js<\/b> and<\/span> clientlib.config.js<\/b>\u00a0 file inside vue-app and provide the copywebpackplugin to copy the build file from<\/span> dist\/js\/main.js,dist\/css\/main.css<\/b> to <\/span>ui.apps\/src\/main\/content\/jcr_root\/apps\/wknd\/clientlibs\/vue and ui.apps\/src\/main\/content\/jcr_root\/apps\/wknd\/clientlibs\/clientlib-base\/js and \/css folder<\/b>.<\/span>
\n<\/span>
\n<\/b>webpack.config.js and clientlib.config.js<\/b><\/li>\n<\/ul>\n
\n<\/span>![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/webpackconfig.png\")
<\/span>
\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/clientconfig.png\")
<\/span><\/p>\n\n- In package.json change the build inside scripts like below<\/span>
\n<\/span> “build”: “webpack && clientlib –verbose”<\/b> .<\/span><\/li>\n- Do <\/span>npm install<\/b> and <\/span>npm install –save-dev webpack webpack-cli webpack-dev-server<\/b> to download all the necessary webpack dependencies.<\/span><\/li>\n
- Then run <\/span>npm run build<\/b> command inside the vue-app directory. So the build file <\/span>main.js and main.css<\/b> will be created in the dist folder of vue app. Along with that, it will be copied automatically to the clientlib folder and _content.xml file be created automatically. Attached is a screenshot below:<\/span><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/uiappslib.png\")
<\/span><\/p>\n\n- Inside js.txt and css.txt write #base=js main.js and #base=css main.css.<\/span>
\n<\/span><\/li>\n<\/ul>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/csstxt.png\")
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/jstxt.png\")
\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\nDeploying AEM and Vue.js Integration<\/b><\/h2>\n\n- Go to the root directory and run the command <\/span>mvn clean install -PautoInstallSinglePackage -Pclassic.<\/b><\/li>\n
- Open the browser and enter the URL <\/span>http:\/\/localhost:4502\/aem\/start.html<\/b><\/a><\/li>\n
- Login by user ID and password as admin. Then go to <\/span>http:\/\/localhost:4502\/editor.html\/content\/wknd\/language-masters\/en.html<\/b><\/a>.<\/b>
\n<\/b>![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/aemhomeui.png\")
<\/b><\/li>\n- Click on drag components and then insert checklist, item review, and item action component, then view as publish to see the results on UI.Added screenshot below.<\/span>
\n<\/span>![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/ui1.png\")
<\/span><\/span><\/li>\n- Click on Add to see the items on the carts and the offer section. Added is a screenshot below.<\/span>
\n<\/span>
\n<\/span>
\n<\/span>![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/ui2.png\")
<\/span><\/span><\/li>\n<\/ul>\nConclusion<\/b><\/h2>\n
In this comprehensive guide, we have learned the in and out of seamlessly integrating AEM with vue.js. By following these step-by-step instructions, you can optimize performance, create stunning components, and deploy your AEM vue.js project with confidence.<\/span><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"Overview of AEM and vue.js Adobe Experience Manager (AEM) is a powerful content management system that allows for seamless content creation and management. On the other hand, vue.js is a progressive JavaScript framework that simplifies front-end development. Integrating AEM with vue.js can enhance the user experience and streamline development processes. Benefits of Integrating AEM with […]<\/p>\n","protected":false},"author":1773,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":273},"categories":[5868,3429,1994,1,4488],"tags":[4847,5845],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61459"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1773"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=61459"}],"version-history":[{"count":8,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61459\/revisions"}],"predecessor-version":[{"id":61607,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61459\/revisions\/61607"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=61459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=61459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=61459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Creating Vue.Js project and component<\/b><\/h3>\n
Prerequisites<\/span>:<\/span><\/p>\n Step 1<\/span><\/p>\n Purpose : Creation of three independent components i.e. checked items, item review, and items action.checkeditems component will show lists of items with add\/remove button. After clicking on add, it will added to item review component, the button will be changed to remove, and if it is eligible for an offer it will be added to itemsaction component.<\/span><\/p>\n Component creation<\/b><\/p>\n Step 1<\/span><\/p>\n Attached are some screenshot below:-\u00a0<\/span><\/p>\n We are going to build the vue app by custom webpack configuration. So that the final build file will be stored inside the ui.apps folder.<\/span><\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 In this comprehensive guide, we have learned the in and out of seamlessly integrating AEM with vue.js. By following these step-by-step instructions, you can optimize performance, create stunning components, and deploy your AEM vue.js project with confidence.<\/span><\/p>\n Overview of AEM and vue.js Adobe Experience Manager (AEM) is a powerful content management system that allows for seamless content creation and management. On the other hand, vue.js is a progressive JavaScript framework that simplifies front-end development. Integrating AEM with vue.js can enhance the user experience and streamline development processes. Benefits of Integrating AEM with […]<\/p>\n","protected":false},"author":1773,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":273},"categories":[5868,3429,1994,1,4488],"tags":[4847,5845],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61459"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1773"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=61459"}],"version-history":[{"count":8,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61459\/revisions"}],"predecessor-version":[{"id":61607,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61459\/revisions\/61607"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=61459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=61459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=61459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n<\/span>1. <\/span>Install Node.js<\/b> – Before getting started, make sure you have Node.js installed on your system. You can download the specified version from the official Node.js website(<\/span>https:\/\/nodejs.org\/<\/span><\/a>).<\/span><\/li>\n<\/ul>\n\n
\n<\/b>This command will install Vue CLI globally on your system, allowing you to access the Vue CLI command-line interface from any directory.<\/span><\/li>\n\n
\n<\/span><\/p>\nvue create vue-app<\/b><\/pre>\n<\/li>\n
\n
<\/p>\nVuejs Component creation and integration inside AEM<\/b><\/b><\/h2>\n
\n
\n<\/span>We will create <\/span>new vue<\/b> to instantiate the component, then inside the <\/span>data <\/b>property initialize all properties,<\/span>mounted <\/b>hook is often used to perform one-time initialization logic, such as fetching data from an API or setting up event listeners.<\/span>methods<\/b> will be used for all dom actions related to the component.<\/span><\/p>\n
\n<\/span><\/span><\/p>\n<\/span><\/p>\n\n
<\/p>\n\n
\n<\/b>Menusreview.css,itemactions.css.<\/b><\/li>\n<\/ul>\n \u00a0<\/span><\/span><\/p>\n<\/span><\/p>\n<\/span><\/p>\n\n
<\/span>
\n<\/span><\/p>\n\n
\n<\/span><\/li>\n<\/ul>\n<\/p>\nComponent Build and Integration<\/b><\/h2>\n
\n
\n<\/span>
\n<\/b>webpack.config.js and clientlib.config.js<\/b><\/li>\n<\/ul>\n
\n<\/span><\/span>
\n<\/span><\/p>\n\n
\n<\/span> “build”: “webpack && clientlib –verbose”<\/b> .<\/span><\/li>\n<\/span><\/p>\n\n
\n<\/span><\/li>\n<\/ul>\n\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\nDeploying AEM and Vue.js Integration<\/b><\/h2>\n
\n
\n<\/b><\/b><\/li>\n
\n<\/span><\/span><\/span><\/li>\n
\n<\/span>
\n<\/span>
\n<\/span><\/span><\/span><\/li>\n<\/ul>\nConclusion<\/b><\/h2>\n