I was trying to blend the account pages with the rest of my website but I’ve run into an issue. I’ve copied over account.php that was setup in the atomik folder and I’m getting a ReferenceError: Vue is not defined in the console. I thought maybe I needed to use $this->requireAsset(‘javascript’, ‘vue’); but this doesn’t get rid of the error. The avatar page is currently broken without any option to upload an image which I can only assume is caused by this error. Looking at the source code I don’t see any javascript files that I’m missing.
I figured it out. In my footer is <?php View::element('footer_required'); ?> which is including these two scripts that mess up the account page:
<script type="text/javascript" src="/concrete/js/features/account/frontend.js?ccm_nocache=bf4014e1ebfd550fb74420f707d105c69ac3304d"></script>
<script type="text/javascript" src="/concrete/js/features/desktop/frontend.js?ccm_nocache=bf4014e1ebfd550fb74420f707d105c69ac3304d"></script>
So instead of using my default footer I created a new one for only the account pages without that line and included the Vue JavaScript file instead of requiring it for the whole website.
I stumbled on this error, too. The profile image uploader did’t appear.
I’m using the composer based installation of ccms version 9 and I’m using concrete’s bedrock for my own theme.
In the resources/js/main.js file I had to import
import '@concretecms/bedrock/assets/account/js/frontend';
Then I had to add
.vue({ version: 2 })
to the webpack.mix.js file as it’s described in the Laravel Mix docs. Mix will then automatically install the proper versions of vue-loader and vue-template-compiler.
‘npm run dev’ and the profile image upload shows up!